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

Question

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

这是完整的错误：

react_devtools_backend.js：2557 react-beautiful-dnd：设置问题是 遭遇。 > 不变失败：provided.innerRef尚未被 提供一个 HTMLElement。您可以找到有关使用 insideRef 的指南 回调函数 位于：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？使用 insideRef 属性代替。”

本教程使用 v3.2.6，请在此处检查 package.json： https://codesandbox.io/embed/github/eggheadio-projects/react-beautiful-dnd-task-app/tree/lesson-3/?hidenaviigation =1

因此，要修复该错误，请在使用最新版本的样式组件（5.3.0）时，将：

innerRef={provided.innerRef}

更改为

ref={provided.innerRef}

。

Answer 2

将组件包装在 div 中并使用 div 上的属性。

<Droppable droppableId={column.id}>
  {(provided) => (
    <div innerRef={provided.innerRef} {...provided.droppableProps}>
      <TaskList>
        {clients.map((client, idx) => (
          <Task key={client.id} client={client} index={idx} />
        ))}
        {provided.placeholder}
      </TaskList>
    </div>
  )}
</Droppable>;

有关此内容的更多信息，请访问此链接react-beautiful-dnd github

注意：如果您使用 styled-components v4，则

innerRef

属性将被替换为

ref

。

Answer 3

我能够通过进行以下 2 项更改来解决此问题。

在我的应用程序中，用例是拖放表单中的某些字段（就像表单生成器一样）。我实现了一个自定义组件，将 fieldId 转换为该字段的表示形式。

1. 在某些情况下，

   pointer-events

   在自定义组件上设置为

   all

   。后来设置为

   none

2. <Draggable />

   内的div有指针事件

   onMouseEnter

   和

   onMouseLeave

   ，为我消除了这些已解决的问题。