不能使用 React Beautiful DND 给函数组件提供 refs答案

【问题标题】：Function components cannot be given refs with React Beautiful DND不能使用 React Beautiful DND 给函数组件提供 refs
【发布时间】：2021-07-13 11:36:35
【问题描述】：

我正在尝试使用 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.

以下是我的代码的sn-p。我还使用了样式化组件：

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

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

【问题讨论】：

错误中提到，需要将ref转发到TodoList

标签： javascript reactjs react-beautiful-dnd react-ref

【解决方案1】：

如错误消息所述，

函数组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 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>
});

【讨论】：

【解决方案2】：

如前所述，“Function components cannot be given refs.”，意思是你需要为你的自定义函数组件实现一个 ref 转发，例如：

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

见related docs。

【讨论】：