我尝试使用“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 👷 这是一条仅供开发的消息。它将在生产版本中删除。
最佳答案
我遇到了同样的问题，但我在文档中发现您需要将占位符添加为可放置和可拖动的子项。
示例:
<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>
关于javascript - React-beautiful-dnd - DroppableProvided > 找不到占位符。 - 怎么修？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58802602/