在学习如何使用react-beautiful-dnd
库时,我发现(在构建库所需的结构时)如果我在主应用程序之外定义组件,它适用于 React,但不适用于 Gatsby(开发),它开始工作,但随后出现错误
但是如果我在主应用程序中移动这些组件,那么它也适用于 Gatsby
示例代码:
export default () => {
const [elements, setElements] = useState(myElements)
const onDragEnd = result => {
const { destination, source} = result
if (!destination) return
if (destination.droppableId === source.droppableId && destination.index === source.index) return
const new_elements = reorder(elements, source.droppableId, destination.droppableId, source.index, destination.index)
setElements(new_elements)
}
const Columns = ({ arr }) =>
arr.map((col, i) => (
<Droppable droppableId={col.columnId} key={i}>
{(provided, snapshot) => (
<Ul ref={provided.innerRef}>
<Elements arr={col.items} />
{provided.placeholder}
</Ul>
)}
</Droppable>
))
const Elements = ({ arr }) =>
arr.map((el, j) => (
<Draggable draggableId={el.id} index={j} key={j}>
{(provided, snapshot) => (
<Li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
{el.text}
</Li>
)}
</Draggable>
))
return (
<DragDropContext onDragEnd={onDragEnd}>
<Grid>
<Columns arr={myElements} />
</Grid>
</DragDropContext>
)
}
因此,如果Columns
和Elements
在外部定义,它就不起作用(但它适用于 React)
为什么会这样?
(沙盒:https ://codesandbox.io/s/using-react-beautiful-dnd-with-hooks-bfwzl?fontsize=14&hidenavigation=1&theme=dark )