React-beautiful-dnd - 警告：defaultProps 将被删除

Question

我不明白控制台中的此警告。有人可以告诉我这是图书馆的问题还是我这边的错误？

这是我触发警告的代码

我使用的是13.1.1版本

<DragDropContext onDragEnd={handleDrop}>
   <Droppable droppableId="list-container" >
      {(providedA: any) => (
         <div {...providedA.droppableProps} ref={providedA.innerRef}>
            {steps.map((step, index) => {
               return <Draggable  key={step.id} draggableId={step.id.toString()} index={index}>
                  {(provided: any) => (
                     <div ref={provided.innerRef} {...provided.dragHandleProps} {...provided.draggableProps}>
                        <div>{step.title}</div>
                     </div>
                   )}
                </Draggable>
              })}
           {providedA.placeholder}
         </div>
      )}
   </Droppable>
</DragDropContext>

谢谢

我尝试删除代码，发现是导致问题的 Droppable 元素。我在 React-beautiful-dnd 的 github 上没有找到任何关于此的问题。

Answer 1

该警告是由库引起的。具体来说，react-beautiful-dnd 使用旧版本的react-redux，而后者又使用了消息中提到的功能：defaultProps。

所以通常情况下，react-beautiful-dnd 会更新它的代码以使用新版本的react-redux，然后你更新到最新版本，问题就会消失。然而，由于 React-beautiful-dnd 不再开发，他们不太可能这样做。这给你留下了几个选择：

1. 代码仍然有效，所以你可以什么也不做。 React 警告您 defaultProps 将最终停止工作，但我们还没有到那一步。可能破坏代码的最早可能版本是 React 19.0.0，但甚至还没有该版本的时间表。

2. 您可以切换到不同于react-beautiful-dnd 的库。也许像 react-draggable 这样的东西适合你，尽管我不知道你的需求是什么

3. 您可以分叉react-beautiful-dnd并修改他们的代码来修复它。然后您将使用代码的分叉版本而不是原始代码。

Answer 2

今天，到目前为止，我的项目中的

react-beautiful-dnd

13.1.1 遇到了与您完全相同的问题。下面描述的步骤完美地修复了它。我发现本质上是

react-beautiful-dnd

的一个分支，称为

@hello-pangea/dnd

，它提供与最新版本

react-beautiful-dnd

完全相同的功能，但具有最新的依赖项。您甚至不必费心更改组件名称或以任何不同方式实现它们或任何其他内容：它“就可以工作。”

就我而言，我的项目中来自

react-beautiful-dnd

的所有内容都是主组件中的

DragDropContext

、

Draggable

和

DropResult

，然后是一个使用定义的

Droppable

和

DroppableProps

的自定义辅助函数在一个单独的组件中并导入到主组件中，所以我只需要更新两个组件的导入语句。

1. 在终端中运行：

   npm install @hello-pangea/dnd

   或

   yarn add @hello-pangea/dnd

2. 将所有组件中的所有

   import { ... } from "react-beautiful-dnd"

   语句替换为

   import { ... } from "@hello-pangea/dnd"

   语句。