react-beautiful-dnd - DroppableProvided > 找不到占位符。 - 怎么修？答案

【问题标题】：react-beautiful-dnd - DroppableProvided > placeholder could not be found. - how to fix?react-beautiful-dnd - DroppableProvided > 找不到占位符。 - 怎么修？
【发布时间】：2021-06-16 12:22:55
【问题描述】：

我尝试使用“react-beautiful-dnd”，并在现有项目中实施。我正在使用的软件包版本是 10.1.1，因为我无法使用更高版本。

我尝试将占位符放在不同的 div 中，并为可放置元素提供。

import React from 'react';
import SalesChart from './SalesChart';
import Tasks from './Tasks';
import LunchFeed from 'widgets/LunchFeed';
import Weather from 'widgets/Weather';
import {Draggable, Droppable, DragDropContext} from "react-beautiful-dnd";

class Dashboard extends React.Component {
    constructor(props) {
        super(props);
    }

    onDragEnd(result) {
        //TODO
        const {destination, source, draggableId} = result;
        console.log(result);

        if (!destination) {
            return;
        }

    }

    render() {
        return (
            <DragDropContext onDragEnd={this.onDragEnd}>
                <Droppable droppableId="drop1">
                    {(provided, snapshot) => (
                        <div className="content" ref={provided.innerRef}  {...provided.droppableProps}>
                            <div className="container-fluid">


                                <div className="row">

                                    <Draggable key={1} draggableId={1} index={1}>

                                        {(provided, snapshot) => (
                                            <div className="col-md-6">
                                                <SalesChart innerRef={provided.innerRef}
                                                            {...provided.draggableProps}
                                                            {...provided.dragHandleProps}/>
                                            </div>
                                        )}

                                    </Draggable>

                                    <Draggable key={2} draggableId={2} index={2}>

                                        {(provided, snapshot) => (
                                            <div className="col-md-6">
                                                <Tasks innerRef={provided.innerRef}
                                                       {...provided.draggableProps}
                                                       {...provided.dragHandleProps}/>
                                            </div>

                                        )}

                                    </Draggable>


                                </div>

                                <div className="row">

                                    <Draggable key={3} draggableId={3} index={3}>

                                        {(provided, snapshot) => (
                                            <div className="col-md-6">
                                                <LunchFeed innerRef={provided.innerRef}
                                                           {...provided.draggableProps}
                                                           {...provided.dragHandleProps}/>
                                            </div>

                                        )}

                                    </Draggable>
                                    <Draggable key={4} draggableId={4} index={4}>

                                        {(provided, snapshot) => (
                                            <div className="col-md-6">
                                                <Weather innerRef={provided.innerRef}
                                                         {...provided.draggableProps}
                                                         {...provided.dragHandleProps}/>
                                            </div>
                                        )}

                                    </Draggable>

                                </div>
                            </div>
                            {provided.placeholder}
                        </div>

                    )}
                </Droppable>
            </DragDropContext>
        )
    }
}

export default Dashboard;

我在拖动元素时收到以下警告： Droppable 设置问题 [droppableId: "drop1"]:DroppableProvided > 找不到占位符。请务必将 {provided.placeholder} React 节点添加为 Droppable 的子节点。更多信息：https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md??????‍这是一个仅用于开发的消息。它将在生产版本中删除。

【问题讨论】：

标签： javascript reactjs react-beautiful-dnd

【解决方案1】：

我遇到了同样的问题，但我在文档中发现您需要将占位符添加为 droppable & draggable 的子项。

例子：


<Draggable key={1} draggableId={1} index={1}>
    {(provided, snapshot) => (
        <div className="col-md-6">
             <SalesChart innerRef={provided.innerRef}
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}/>
             {provided.placeholder}
        </div>
    )}
</Draggable>

【讨论】：

您能否指定在文档的哪一部分中您发现在<Draggable /> 组件中也需要一个占位符？在项目的 GitHub 上，placeholder 在<Droppable /> 组件中被提及，但在<Draggable /> 中却没有。
我没有再找到它，也许它已经改变了。事实是我只能解决在可拖动中添加占位符的错误。如果您发现任何其他信息，或者您可以删除警告，仅添加可放置占位符，请告诉我以更改答案。谢谢;)
我发现Draggable（2018 年 4 月之前）之前的 API 中需要 placeholder，请参阅项目维护者在 GitHub 问题 #8 of react dnd 中的this answer .此修复程序于 2018 年 4 月合并，请参阅 PR #406。 OP 提到的 10.1.1 版本是在 2019 年的 mars 发布的。所以奇怪的是 OP 的问题是用这个技巧解决的，但很高兴它帮助了社区。span>

【解决方案2】：

我在这里使用droppable.md解决了同样的问题。

你应该使用{provided.placeholder}

【讨论】：

【解决方案3】：

我可以看到您已经完成了documentation 中描述的所有操作。我遇到了同样的问题，并且我也遵循了文档，但仍然收到相同的警告消息。当我注意文档结构时，它终于对我有用了，发现 我有额外的不相关子元素以及可拖动和 {provided.placeholder} 在 droppable 内。对于您的情况，使用 <div className='row'> 而不是 <div className='content'> 作为可放置道具和参考属性可能会修复警告。

【讨论】：

【解决方案4】：

我在本地也遇到过同样的问题。

您只需在可放置容器的末尾注入以下代码{provided.placeholder}

例如

<Droppable droppableId="droppable-1">
  {(provided, snapshot) => (
    <div ref={provided.innerRef} {...provided.droppableProps}>
      Good to go

      {provided.placeholder} // <- this is what you need 
    </div>
  )}
</Droppable>

来源：https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md#droppable-

【讨论】：