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

【问题标题】：React-Beautiful-DnD: Invariant failed: provided.innerRef has not been provided with a HTMLElementReact-Beautiful-DnD：不变式失败：provided.innerRef 尚未提供 HTMLElement
【发布时间】：2021-05-11 18:12:49
【问题描述】：

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

这是完整的错误：

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

谢谢！！！

【问题讨论】：

标签： reactjs react-component react-dnd react-beautiful-dnd

【解决方案1】：

我也有同样的问题。这是因为 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}。

【讨论】：