3

我正在尝试实施react-beautiful-dnd. 他们有我遵循的视频指南，并多次检查并将我的代码与视频中的代码进行比较，但我一直收到此错误。

我将在这里发布我的代码，但我也在这里设置了一个沙箱：

https://codesandbox.io/s/xenodochial-euclid-m5sfk?fontsize=14&hidenavigation=1&theme=dark

我正在尝试设置react-beautiful-dnd. 我有 4 个文件。索引、列和单个项目（在我的代码中称为任务，因为这是一个待办事项应用程序）：

指数：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "@atlaskit/css-reset";
import { DragDropContext } from "react-beautiful-dnd";
import initialData from "./initial-data";
import Column from "./column";

class App extends Component {
  state = initialData;

  onDragEnd = result => {
    console.log("drag ended");
    // TODO reorder our column
  };

  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        {this.state.columnOrder.map(columnId => {
          const column = this.state.columns[columnId];
          const tasks = column.taskIds.map(taskId => this.state.tasks[taskId]);

          return <Column key={column.id} column={column} tasks={tasks} />;
        })}
      </DragDropContext>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

列.jsx：

import React, { Component } from "react";
import styled from "styled-components";
import { Droppable } from "react-beautiful-dnd";

import Task from "./task";

const Container = styled.div`
  margin: 8px;
  border: 1px solid lightgrey;
  border-radius: 2px;
`;
const Title = styled.h3`
  padding: 8px;
`;
const TaskList = styled.div`
  padding: 8px;
`;

export default class Column extends Component {
  render() {
    return (
      <Container>
        <Title>{this.props.column.title}</Title>
        <Droppable droppableId={this.props.column.id}>
          {provided => (
            <TaskList
             innerRef={provided.innerRef}
              {...provided.droppableProps}
               >
              {this.props.tasks.map((task, index) => (
                <Task key={task.id} task={task} index={index} />
              ))}
              {provided.placeholder}
            </TaskList>
          )}
        </Droppable>
      </Container>
    );
  }
}

任务.jsx：

import React, { Component } from "react";
import styled from "styled-components";
import { Draggable } from "react-beautiful-dnd";

const Container = styled.div`
  border: 1px solid lightgrey;
  border-radius: 2px;
  padding: 8px;
  margin-bottom: 8px;
  background-color: white;
`;

export default class Task extends Component {
  render() {
    return (
      <Draggable draggableId={this.props.task.id} index={this.props.index}>
        {provided => (
          <Container
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            innerRef={provided.innerRef}
          >
            {this.props.task.content}
          </Container>
        )}
      </Draggable>
    );
  }
}

初始数据：

const initialData = {
  tasks: {
    "task-1": { id: "task-1", content: "Take out the garbage" },
    "task-2": { id: "task-2", content: "Watch my favorte show" },
    "task-3": { id: "task-3", content: "Charge my phone" },
    "task-4": { id: "task-4", content: "Cook dinner" }
  },
  columns: {
    "column-1": {
      id: "column-1",
      title: "To Do",
      taskIds: ["task-1", "task-2", "task-3", "task-4"]
    }
  },
  columnOrder: ["column-1"]
};

export default initialData;

它与我认为的 innerRef 有关，但无法理解我在做什么不同

4

1 回答 1

3

切换innerRef到简单地ref为我解决了它。

于 2020-03-17T14:57:31.457 回答