如何解决React-Beautiful-DnD:不变失败:provided.innerRef 尚未提供 HTMLElement
我一直在学习教程,但意外收到此错误,有人知道发生了什么吗?
这里是完整的错误:
react_devtools_backend.js:2557 react-beautiful-dnd:设置问题是 遭遇。 > 不变失败:provided.innerRef 没有被 提供了一个 HTMLElement。您可以找到有关使用 innerRef 的指南 回调函数 在:https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md
可放置代码:
render() {
const { column,clients } = this.props;
return (
<Container>
<Title>{column.name}</Title>
<Droppable droppableId={column.id}>
{(provided) => (
<TaskList
innerRef={provided.innerRef}
{...provided.droppableProps}
>
{clients.map((client,idx) => (
<Task
key={client.id}
client={client}
index={idx}
/>
))}
{provided.placeholder}
</TaskList>
)}
</Droppable>
</Container>
);
}
可拖动代码:
render() {
const { client,index } = this.props;
return (
<Draggable draggableId={client.id} index={index}>
{(provided) => (
<Container
innerRef={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
{client.name}
</Container>
)}
</Draggable>
);
}
谢谢!!!
解决方法
我遇到了同样的问题。这是因为 styled-components 库改变了它处理 ref/innerRef 的方式。请参阅他们的文档:https://styled-components.com/docs/advanced#refs,其中指出: “使用旧版本的样式组件(低于 4.0.0)或 React?改用innerRef 属性。”
本教程使用 v3.2.6,这里查看 package.json:https://codesandbox.io/embed/github/eggheadio-projects/react-beautiful-dnd-task-app/tree/lesson-3/?hidenavigation=1
因此要修复错误,请在使用最新版本的样式组件 (5.3.0) 时将:innerRef={provided.innerRef}
更改为 ref={provided.innerRef}
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。