React Beautiful DND 无法为函数组件提供 refs

Question

我正在尝试使用 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>
    </>
  );
}

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

Answer 1

如前所述，“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。

Answer 2

如错误消息所述，

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

Invariant failed: provided.innerRef has not been provided with a 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>
});

React Beautiful DND 无法为函数组件提供 refs

Function components cannot be given refs with React Beautiful DND

javascript

reactjs

react-ref

react-beautiful-dnd

或