Учимся реагировать Красивые основы DnD без сборки Trello Clone - PullRequest
Новая
       36

Учимся реагировать Красивые основы DnD без сборки Trello Clone

0 голосов
/ 28 января 2020

Я хочу изучить React Beautiful Dnd, кодируя два блока div, которые содержат дочерние элементы, которые я могу перетаскивать между ними. Все (большинство?) Онлайн-уроки - это клоны Trello с циклами и утверждениями, которые загромождают мое понимание основ. Я хочу упростить мое понимание жестким кодированием только самого минимального необходимого состояния, конечный результат - два компонента (имя компонента - «Столбец»), каждый из которых содержит div (компонент с именем «Задача»), который я могу перетащить в другое.

На данный момент. Я получаю сообщение об ошибке «Ошибка типа: дети - это не функция».

Вот мой код:

src / App. js

import {DragDropContext} from 'react-beautiful-dnd';

import Column from './Components/Column';

function App() {



  return (
    <DragDropContext onDropEnd={result => console.log("my life is worth more than this")}>


       <Column id="1"/>

    </DragDropContext>

  );
}

export default App;

src / Компоненты / Столбец 

import React from 'react';
import {Droppable} from 'react-beautiful-dnd';
import Task from "../../Components/Task"

function Column(props){
   const { classes, id } = props;

   let style = {
    backgroundColor:"orange",
    height:"100px",
    width:"100px",
    margin:"100px"

   }
    return (

       <Droppable droppable = {id}>
       {provided => (

          <div {...provided.droppableProps} ref={provided.innerRef} style={style}>
            Column is orange task is red 
            <Task id="1"/>
            <Task id="2"/>
            {provided.placeholder}
          </div>
        )

       }

       </Droppable>
    )
}

export default Column

src / Компоненты / Задача 

import React from 'react';
import {Draggable} from 'react-beautiful-dnd';



function Task(props){
      const { classes, id } = props;

    return (
       <Draggable draggableId ={id}>

       <div>
        some task
       </div>

       </Draggable>
    )
}

export default Task

1 Ответ

0 голосов
/ 28 января 2020

Вот базовый c рабочий пример простого перетаскивания элементов (на случай, если кто-то его ищет). Я решил задокументировать свое обучение здесь, потому что чувствую, что в официальных документах отсутствуют коррективные примеры. Мне нравятся примеры "Hello World".

Первое, что нужно понять, это то, что использование библиотеки требует понимания трех компонентов. Каждый компонент имеет свой соответствующий шаблонный код.

Они (скрыты внизу страницы) в официальных документах. 

<DragDropContext />

- Оборачивает ту часть вашего приложения, которую вы хотите иметь перетаскивание включено для 

<Droppable />

- область, в которую можно попасть. Содержит компоненты 

<Draggable />

- Что можно перетаскивать вокруг

Ваше приложение должно быть заключено в один DragDropContext (несколько DragDropContext не поддерживаются). Этот пример имеет минимальное состояние. Свойства id в объектах состояния являются обязательными (они могут называться по-разному, но, тем не менее, необходимы).

src / App. js

import React,{useState} from 'react';
import {DragDropContext} from 'react-beautiful-dnd';


import Column from './Components/Column';

function App() {

  const [listOne, setListOne] = useState([{id:"1", title:"Test-1"},{id:"2", title:"Test-2"}]);
  const [listTwo, setListTwo] = useState([{id:"3", title:"Test-3"},{id:"4", title:"Test-4"}]);

  return (
    <DragDropContext onDropEnd={result => console.log(result)}>

       <Column id="1" list = {listOne}/>
       <Column id="2" list = {listTwo}/>

       <div> context hello world </div>

    </DragDropContext>

  );
}

export default App;

<Droppable/> гнездо компонентов <Draggable/> компоненты. Требуется код возвращаемой функции котельной пластины: 

{provided => (

)}

Пояснение для каждого свойства provided - здесь

src / Components / Column 

import React from 'react';
import {Droppable} from 'react-beautiful-dnd';
import Task from "../../Components/Task"

function Column(props){
   const { classes, id, list } = props;

   let style = {
    backgroundColor:"orange",
    height:"300px",
    width:"400px",
    margin:"100px"

   }

   console.log(list)

    return (

       <Droppable droppableId = {id}>
       {provided => (

          <div {...provided.droppableProps} ref={provided.innerRef} style={style}>

            {list.map((val,index)=>{
               return <Task id={val.id} key={index} index={index} title={val.title}/>
            })}

           {provided.placeholder}
          </div>
        )
       }
       </Droppable>
    )
}

export default Column

src / Компоненты / Задача 

import React from 'react';
import {Draggable} from 'react-beautiful-dnd';



function Task(props){
    const { classes, id, index,title } = props;
    let style = {
    backgroundColor:"red",


   }

    return (
       <Draggable draggableId ={id} index={index} >

         {(provided) => (
            <div
              ref={provided.innerRef}
              {...provided.draggableProps}
              {...provided.dragHandleProps}
            >
              <h4 style={style}>{title}</h4>
            </div>
        )}

       </Draggable>
    )
}

export default Task
...