无法使用 React Beautiful DND 为函数组件提供引用

问题描述

我正在尝试使用 React Beautiful DND 库在待办事项应用程序中拖放列表，但我的控制台中不断出现这三个错误。

错误 1：

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Droppable`.

错误 2：

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Draggable`.

错误 3：

Invariant Failed: provided.innerRef has not been provided with a HTMLElement.

以下是我的代码片段。我还使用了样式组件：

import React from 'react';
import styled from 'styled-components';
import { DragDropContext,Droppable,Draggable } from 'react-beautiful-dnd';


function App() {
  ...

  return (
    <>
        <DragDropContext>
          <Droppable>
            {(provided) => (
              <TodoList {...provided.droppableProps} ref={provided.innerRef}>
                {
                  shadowTodoItems.map((todoItem,index) => (
                    <Draggable key={todoItem.id} draggableId={todoItem.id} index={index}>
                      {(provided) => (
                        <div>
                          <TodoListItem ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} />
                        </div>
                        
                      )}
                    </Draggable>
                  ))
                }
                {provided.placeholder}
              </TodoList>
            )}
          </Droppable>
        </DragDropContext>
    </>
  );
}

我该如何解决这些错误？谢谢。

解决方法

如前所述，“函数组件不能被赋予引用”，这意味着你需要为你的自定义函数组件实现一个引用转发，例如：

const TodoList = React.forwardRef(ref,props => {
  // Forward the ref to inner wrapper,whatever the implemention is
  return <div ref={ref}></div>
});

见related docs。

,

正如错误消息所述，

不能给函数组件提供引用。尝试访问此引用将失败。你的意思是使用 React.forwardRef() 吗？

不变失败：provided.innerRef 没有被提供一个 HTMLElement。

添加 div 并提供 ref。

 <DragDropContext>
          <Droppable>
            {(provided) => (
              <div  ref={provided.innerRef}>
                <TodoList {...provided.droppableProps}>
                    {
                    shadowTodoItems.map((todoItem,index) => (
                        <Draggable key={todoItem.id} draggableId={todoItem.id} index={index}>
                        {(provided) => (
                            <div ref={provided.innerRef}>
                            <TodoListItem {...provided.draggableProps} {...provided.dragHandleProps} />
                            </div>
                            
                        )}
                        </Draggable>
                    ))
                    }
                    {provided.placeholder}
                </TodoList>
              </div>
            )}
          </Droppable>
        </DragDropContext>

或

考虑使用 React.forwardRef

包装您的组件

const TodoList = React.forwardRef((props,ref) => {
  return <div ref={ref}>...</div>
});