1

我想通过编写两个包含可以在它们之间拖动的子元素的 div 框来学习 React Beautiful Dnd。所有（大多数？）在线教程都是带有循环和状态的 Trello 克隆，这使我对基础知识的理解变得混乱。我想通过仅对所需的最小状态进行硬编码来简化我的理解，最终结果是两个组件（组件名称为“Column”），每个组件都包含一个 div（一个名为“Task”的组件），我可以将其拖到其他。

眼下。我收到错误“TypeError：children is not a function”。

这是我的代码：

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
4

1 回答 1

2

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

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

它们（隐藏在页面下方）在官方文档中。

<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是here

src/组件/列

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
于 2020-01-28T20:19:19.863 回答