React-Beautiful-DnD：不变失败：provided.innerRef 尚未提供 HTMLElement

Question

我正在按照教程进行操作，但意外收到此错误，有人知道发生了什么吗？

这是完整的错误：

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>
        );
    }

谢谢你！！！

Answer 1

我也有同样的问题。这是因为 styled-components 库改变了它处理 ref/innerRef 的方式。请参阅他们的文档： https: //styled-components.com/docs/advanced#refs，其中指出：“使用旧版本的 styled-components（低于 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/ ?hidenaviigation=1

因此，要修复该错误，请在使用最新版本的 style-components (5.3.0) 时，将： 更改innerRef={provided.innerRef}为ref={provided.innerRef}。