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}。