反应流更改节点名称

Question

我对react.js很陌生(对javascript有点陌生)，所以提前道歉。

我正在看这个例子:

https://reactflow.dev/examples/drag-and-drop/

我相信这里的git repo是匹配的:

https://github.com/wbkd/react-flow/tree/main/example/src/DragNDrop

我想修改代码，使文本不再是"input"， "default"， "output"，我希望它是"alpha"， "beta"gamma".

我意识到我应该能够像第19行那样设置标签: https://github.com/wbkd/react-flow/blob/main/example/src/DragNDrop/index.tsx

然而，在这里所示的onDragStart方法中:https://github.com/wbkd/react-flow/blob/main/example/src/DragNDrop/Sidebar.tsx

他们叫一个event.dataTransfer.setData('application/reactflow', nodeType);。我不太确定如何改变它来设置标签。

任何帮助将非常感激，特别是对于初学者的反应。谢谢!

Answer 1

您可以看看这个沙箱的实际工作示例。

可以在侧边栏中更改节点的名称。JSX组件，如:

import React from "react";
export default () => {
const onDragStart = (event, nodeType, label) => {
event.dataTransfer.setData("application/reactflow", nodeType);
event.dataTransfer.setData("label", label);
event.dataTransfer.effectAllowed = "move";
};
return (
<aside>
<div className="description">
You can drag these nodes to the pane on the right.
</div>
<div
className="dndnode input"
onDragStart={(event) => onDragStart(event, "input", "alpha")}
draggable
>
alpha
</div>
<div
className="dndnode"
onDragStart={(event) => onDragStart(event, "default", "beta")}
draggable
>
beta
</div>
<div
className="dndnode output"
onDragStart={(event) => onDragStart(event, "output", "gamma")}
draggable
>
gamma
</div>
</aside>
);
};

并在DndFlow中拖动标签信息。TSX组件可以像这样检索:

import React, { useState, useRef } from "react";
import ReactFlow, {
ReactFlowProvider,
addEdge,
removeElements,
Controls
} from "react-flow-renderer";
import Sidebar from "./Sidebar";
import "./dnd.css";
const initialElements = [
{
id: "1",
type: "input",
data: { label: "alpha" },
position: { x: 250, y: 5 }
}
];
let id = 0;
const getId = () => `dndnode_${id++}`;
const DnDFlow = () => {
const reactFlowWrapper = useRef(null);
const [reactFlowInstance, setReactFlowInstance] = useState(null);
const [elements, setElements] = useState(initialElements);
const onConnect = (params) => setElements((els) => addEdge(params, els));
const onElementsRemove = (elementsToRemove) =>
setElements((els) => removeElements(elementsToRemove, els));
const onLoad = (_reactFlowInstance) =>
setReactFlowInstance(_reactFlowInstance);
const onDragOver = (event) => {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
};
const onDrop = (event) => {
event.preventDefault();
const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
const type = event.dataTransfer.getData("application/reactflow");
const label = event.dataTransfer.getData("label");
const position = reactFlowInstance.project({
x: event.clientX - reactFlowBounds.left,
y: event.clientY - reactFlowBounds.top
});
const newNode = {
id: getId(),
type,
position,
data: { label: label }
};
setElements((es) => es.concat(newNode));
};
return (
<div className="dndflow">
<ReactFlowProvider>
<div className="reactflow-wrapper" ref={reactFlowWrapper}>
<ReactFlow
elements={elements}
onConnect={onConnect}
onElementsRemove={onElementsRemove}
onLoad={onLoad}
onDrop={onDrop}
onDragOver={onDragOver}
>
<Controls />
</ReactFlow>
</div>
<Sidebar />
</ReactFlowProvider>
</div>
);
};
export default DnDFlow;