大家好,我正在努力学习 react-beautiful-dnd,
我遵循所有官方教程并尝试阅读文档,但根本不是很清楚。
但是如果我想渲染一个复杂的数据集呢?
只是为了更好地理解我的问题:
我有一个复杂的反应组件:
<ChangeRequest title="Superframe" requestId="1124" cost="600" supervisor="Jhon Wayne" buttonTitle="valutazione" />
该组件设计复杂,道具中的数据将是动态的。有没有办法在 react-beatiful-dnd 中重用这个组件?还是我必须按照 react-beautiful-dnd 逻辑重写所有内容?
如果我不能重新使用它,我可以从哪里开始重写内容?
在教程中,initialData
我们使用了这个对象:
const initialData = {
tasks: {
'task-1': { id: 'task-1', content: 'ciao' },
'task-2': { id: 'task-2', content: 'contenuto numero 2' },
'task-3': { id: 'task-3', content: 'contenuto numero 3' },
'task-4': { id: 'task-4', content: 'contenuto numero 4' },
'task-5': { id: 'task-5', content: 'contenuto numero 5' },
'task-6': { id: 'task-6', content: 'contenuto numero 6' },
},
columns: {
'column-1': {
id: 'column-1',
title: 'Content Table',
taskIds: ['task-1', 'task-2', 'task-3', 'task-4', 'task-5', 'task-6'],
},
'column-2': {
id: 'column-2',
title: 'In Progress',
taskIds: [],
},
'column-3': {
id: 'column-3',
title: 'Done',
taskIds: [],
},
},
columnOrder: ['column-1', 'column-2', 'column-3'],
};
export default initialData;
在下图中,您将看到 initialData 内容是如何重排的。
这是主要组件的html
render() {
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<div className="columnDnDFlex">
{this.state.columnOrder.map( columnId => {
const column = this.state.columns[columnId];
const tasks = column.taskIds.map(taskId => this.state.tasks[taskId])
return <Column className="columnDnDFlexItem" key={column.id} column={column} tasks={tasks} />
})}
</div>
</DragDropContext>
);
}
}