学习反应美丽的DnD基础而不建立克隆

Question

我想通过编写两个包含子元素的div框来学习，我可以在它们之间拖动子元素。全部(大多数？)在线教程是具有循环和状态的Trello克隆，这扰乱了我对基本知识的理解。我想通过硬编码简化我的理解，只需要最起码的状态，最终结果是两个组件(组件名为“列”)，每个组件包含一个div (一个名为“Task”的组件)，可以拖到另一个组件上。

此刻。我得到了错误“TypeError:子函数不是函数”。

这是我的代码：

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/Components/Column

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/Components/Task

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

Answer 1

下面是一个简单地拖动项目的基本工作示例(以防有人在寻找)。我决定在这里记录我的学习，因为我觉得官方文档中缺乏补救性的例子。我喜欢“你好世界”的例子。

首先要认识到的是，使用库需要理解三个组件。每个组件都有各自的样板代码。

他们(埋没在那页)在官方文档中。

<DragDropContext />

-包装希望为其启用拖放功能的应用程序的部分

<Droppable /> 

-一个可以被扔进的区域。包含组件

<Draggable />

-什么东西可以被拖来拖去

您的应用程序需要封装在一个DragDropContext中(不支持多个DragDropContext )。此示例在状态对象中具有最小的state.The 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/Components/Task

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