如何解决在 const 中声明的组件上的道具不起作用/无法识别reactjs、reactdnd
此代码用于我的仪表板。最初我将它们全部放在一个 div 中(直接调用每个组件)并且道具工作并且似乎没有问题。现在,我做了一个更新,其中每个组件都应该是可拖动的。在为可拖动功能添加了一段代码后,我注意到每个组件的 props 不再有效。
出于所有意图和目的,我还包含了一个直接包含组件的 div(id 是“不可拖动的”)以表明道具确实有效,而在第二个 div (id="draggable") 中,道具好像没被认出来
import React,{ useState } from "react";
import { DragDropContext,Droppable,Draggable } from "react-beautiful-dnd";
import _ from "lodash";
import { v4 } from "uuid";
function NewsFeed(props) {
const RecentTran = {
id: v4(),name: (
<div>
<RecentTransactions arrangeDashboard={props.arrangeDashboard} />
</div>
),};
const TranType = {
id: v4(),name: (
<TransactionType transactionTypedisplay={props.transactionTypedisplay} />
),};
const [state,setState] = useState({
todo: {
items: [RecentTran],},"in-progress": {
items: [TranType],});
const handleDragEnd = ({ destination,source }) => {
if (!destination) {
return;
}
if (
destination.index === source.index &&
destination.droppableId === source.droppableId
) {
return;
}
const addItem = () => {
setState((prev) => {
return {
...prev,todo: {
title: "Todo",items: [
{
id: v4(),name: text,...prev.todo.items,],};
});
setText("");
};
// Creating a copy of item before removing it from state
const itemcopy = { ...state[source.droppableId].items[source.index] };
setState((prev) => {
prev = { ...prev };
// Remove from prevIoUs items array
prev[source.droppableId].items.splice(source.index,1);
// Adding to new items array location
prev[destination.droppableId].items.splice(
destination.index,itemcopy
);
return prev;
});
};
return(
<div>
<div id="nondraggable" style={{ display: "flex" }}>
<TranType />
<RecentTran />
</div>
<div id="draggable" style={{ display: "flex" }} className="App">
<DragDropContext onDragEnd={handleDragEnd}>
{_.map(state,(data,key) => {
return (
<div key={key} className={"column"}>
<h3>{data.title}</h3>
<Droppable droppableId={key}>
{(provided,snapshot) => {
return (
<div
ref={provided.innerRef}
{...provided.droppableProps}
className={"droppable-col"}
>
{data.items.map((el,index) => {
return (
<Draggable
key={el.id}
index={index}
draggableId={el.id}
>
{(provided,snapshot) => {
console.log(snapshot);
return (
<div
className={`item ${
snapshot.isDragging && "dragging"
}`}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
{el.name}
</div>
);
}}
</Draggable>
);
})}
{provided.placeholder}
</div>
);
}}
</Droppable>
</div>
);
})}
</DragDropContext>
</div>
</div>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。