我正在尝试复制 react-beautiful-dnd 教程第 4 步：重新排序列表。据我所知，我已经复制了教程中的代码：https ://egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd
但是，当我运行 react 并尝试拖动列表项时，出现如下错误：Unable to find draggable element with id: task-1
如果我查看 DOM，我肯定可以看到具有该 id 的元素：
我无法弄清楚我做错了什么。我将 id 打印到控制台以检查它是否是字符串，并且确实如此。想法？
初始数据.JS
const initialData = {
tasks : {
"task-1" : { id : "task-1", content : "Take out garbage"},
"task-2" : { id : "task-2", content : "Watch show"},
"task-3" : { id : "task-3", content : "Charge 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;
索引.JS
import React from 'react';
import ReactDOM from 'react-dom';
import initialData from "./initial-data";
import Column from "./column";
import { DragDropContext } from 'react-beautiful-dnd';
class App extends React.Component {
state = initialData;
// Needs to synchronously update our state to reflect the drag-drop result
// The only required DragDrop callback
onDragEnd = result => {
}
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')
);
COLUMN.JS
import React from "react";
import styled from "styled-components";
import Task from "./task";
import { Droppable } from 'react-beautiful-dnd';
const Container = styled.div`
margin: 8px;
border: 1px solid lightgrey;
border-radius: 2px;
`;
const Title = styled.h3`
padding: 8px;
margin: 0px;
`;
const TaskList = styled.div`
padding: 8px;
`;
export default class Column extends React.Component {
render() {
return (
// Note: Droppables expect their child to be a function that returns a react component
<Container>
<Title>{this.props.column.title}</Title>
<Droppable droppableId={this.props.column.id}>
{ provided => (
// The droppableProps in the provided object (a react-beautiful-dnd object) need to get provided to the object
// you want to designate as your droppable
// {provided.placeholder} // Needs to be added as a child of the component you designate as the droppable
// ref is an attribute of -components. Returns the dom node of the component
<TaskList
ref={provided.innerRef}
{...provided.droppableProps}
>
{ this.props.tasks.map( (task, index) => <Task key={task.id} task={task} index={index} /> ) }
{provided.placeholder}
</TaskList>
)}
</Droppable>
</Container>
)
}
}
任务.JS
import React 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; /* so don't see through when dragging */
`;
export default class Task extends React.Component {
render() {
console.log(this.props.task.id)
console.log(typeof this.props.task.id)
return (
// Required draggable props are draggableId and index
// Note: Draggables expect their child to be a function that returns a react component
<Draggable draggableId={this.props.task.id} index={this.props.index}>
{ provided => (
// The draggbleProps in the provided object (a react-beautiful-dnd object) need to get provided to the object
// you want to designate as your draggable
// DragHandleProps needs to get applied to the part of that object that you want to use to drag the whole object
// ref is an attribute of -components. Returns the dom node of the component
<Container
ref={provided.innerRef}
{...provided.draggbleProps}
{...provided.dragHandleProps}
>
{ this.props.task.content }
</Container>
)}
</Draggable>
)
}
}