反应美观，DND不工作，元件不吃力

Question

我一直试图实现我的重新排序列表在我的卡使用react漂亮-dnd库，但我尝试了类似的方式，从egghead.io课程，但无法使它发挥作用。这是我的密码：

    import React, { Component } from "react";
import { Card, Badge } from "react-bootstrap";
import "./projects.scss";
import projectInfo1 from "../../jsonData/projects1";
import { IconContext } from "react-icons";
import { FiPlus } from "react-icons/fi";
import { Droppable, DragDropContext, Draggable } from "react-beautiful-dnd";

class Projects extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.onDragEnd = this.onDragEnd.bind(this);
    this.onDragStart = this.onDragStart.bind(this);
  }
  onDragEnd = result => {};
  onDragStart = result => {};

  render() {
    return (
      <div className="projectCards">
        {projectInfo1.projectsOrder.map((projectID) => {
          const project = projectInfo1.projects[projectID];
          return (
            <DragDropContext onDragEnd={this.onDragEnd} onDragStart={this.onDragStart}>
            <Card className="projectCard" bg="light" style={{ width: "21rem" }} key={project.id}>
                <Card.Header color="#366FF0" className="projectcardheader">
                  {project.projectName}
                </Card.Header>
                <Droppable droppableId={project.id}>
                  {(provided) => (
                    <div
                      className="cardcontent"
                      innerRef={provided.innerRef}
                      {...provided.droppableProps}
                    >
                      {project.topics.map((j, index) => {
                        return (
                          <Draggable draggableId={j.id} index={index}>
                            {(provided) => (
                              <Card
                                key={j.id}
                                className="topicscard"
                                {...provided.draggableProps}
                                {...provided.dragHandleProps}
                                innerRef={provided.innerRef}
                              >
                                <Card.Title className="topicsheading">
                                  {j.topicName}
                                </Card.Title>
                                <Card.Text className="topicdescription">
                                  {j.topicDescription}
                                </Card.Text>
                                <div>
                                  {j.topicTags ? (
                                    j.topicTags.map((k) => {
                                      return (
                                        <Badge
                                          variant="primary"
                                          className="tags"
                                        >
                                          {k}
                                        </Badge>
                                      );
                                    })
                                  ) : (
                                    <Badge variant="primary"></Badge>
                                  )}
                                </div>
                              </Card>
                            )}

                          </Draggable>
                        );
                      })}
                      {provided.placeholder}
                    </div>
                  )}
                </Droppable>
                <div className="addnewcard">
                  <IconContext.Provider
                    value={{
                      style: { verticalAlign: "middle" },
                      className: "reacticon",
                    }}
                  >
                    <FiPlus />
                  </IconContext.Provider>{" "}
                  Add another discussion
                </div>
            </Card>
            </DragDropContext>
          );
        })}
      </div>
    );
  }
}
export default Projects;

我还附加了一张照片，它只是显示鼠标拖动鼠标在卡上盘旋，但没有发生任何拖动，任何帮助都会拯救我！

const projectsInfo1 = {

    projectsOrder:['Project-2','Project-1','Project-5','Project-4','Project-3'],
    projects: {
      'Project-1':{
        projectName: "Project 1",
        id:"p1",
        topics:[{
            id:"p1t1",
            topicName: "Adding a feature: GSoC1",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",      
            topicTags:['ReactJs','NodeJS']
        },
        {   id:'p1t2',
            topicName: "Adding a feature: GSoC2",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",
            topicTags:['ReactJs','NodeJS']     
        },
        {   id:'p1t3',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",
            topicTags:['ReactJs','NodeJS']      
        },
        {   id: 'p1t4',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",
            topicTags:['ReactJs','NodeJS']      
        }],
      },
      'Project-2':{
        projectName: "Project 2",
        id:'p2',
        topics:[{
            id:'p2t1',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p2t2',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p2t3',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p2t4',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        }],
      },
      'Project-3':{
        projectName: "Project 3",
        id:'p3',
        topics:[{
            id:'p3t1',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p3t2',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p3t3',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p3t4',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        }],
      },
      'Project-4':{
        projectName: "Project 4",
        id:'p4',
        topics:[{
            id:'p4t1',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p4t2',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p4t3',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p4t4',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        }],
      },
      'Project-5':{
        projectName: "Project 5",
        id:'p5',
        topics:[{
            id:'p5t1',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p5t2',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p5t3',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        },
        {   id:'p5t4',
            topicName: "Adding a feature: GSoC",
            topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
        }],
      },
    },
  };

  export default projectsInfo1;

Answer 1

备注:

在评论中的谈话之后，问题发生在innerRef身上。

<div innerRef={provided.innerRef}到<div ref={provided.innerRef}

在演示中，他们使用的是样式化的组件，所以他们使用的是innerRef，但是如果您使用的是简单的div，那么您应该只使用ref。

发行:

1)它不会自动工作，您需要在拖尾事件onDragEnd上为它编写代码

2)没有状态管理，所以即使您对导入的json进行了更改，它也不会被反映出来，因为react不知道重新呈现。

解决方案:

1)在state中维护导入的数据

2)在onDragEnd中编写一些代码，检查那里的所有条件，并相应地将更改应用于您的状态(不要更改状态，否则它不会反映更改)

注意:下面是egghead.io的演示代码片段，用于在相同的可下垂区域内对清单进行排序，只是给出了应该如何排序的总体思路。

onDragEnd = result => {
  const { destination, source, draggableId } = result

  if (!destination) {
    return
  }

  if (
    destination.droppableId === source.droppableId &&
    destination.index === source.index
  ) {
    return
  }

  const start = this.state.columns[source.droppableId]
  const finish = this.state.columns[destination.droppableId]


  // this is the logic behind sorting state , you have to do it by your self
  if (start === finish) {
    const newTaskIds = Array.from(start.taskIds)
    newTaskIds.splice(source.index, 1)
    newTaskIds.splice(destination.index, 0, draggableId)

    const newColumn = {
      ...start,
      taskIds: newTaskIds
    }

    const newState = {
      ...this.state,
      columns: {
        ...this.state.columns,
        [newColumn.id]: newColumn
      }
    }

    this.setState(newState)
    return
  }
}

工作演示：

​

​