在 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 (将#修改为@）