是否可以在反应流中通过 ID 更新自定义节点的颜色？

Question

正如文档所述，我正在传递自定义节点所需的道具，并使用 nodeId 道具在单击时更改节点的颜色。我当前的工作流程更改了所有节点的颜色，而不仅仅是我单击的节点的颜色。

如何更改我点击的自定义节点的颜色？

我目前的工作流程如下。

const [customNodeStyles, setNodeStyles] = useState({
    background: 'black',
    padding: 10,
    borderRadius: 50,
    width: 10,
    height: 10
});

const onElementClick = (event, element) => {
    setNodeBg('red');
    setNodeId(element.id);
}

useEffect(() => {
    setNodeStyles({ ...customNodeStyles, background: nodeBg });

}, [nodeId, nodeBg]);

return (
    <div style={{ height: 1000, width: 1000 }}>
        <ReactFlow
            elements={elements}
            nodeTypes={{ special: CustomNodeComponent }}
            nodeTypesId={nodeId}
            onElementClick={onElementClick}
            defaultZoom={1.5}
            minZoom={0.2}
            maxZoom={4}>
        </ReactFlow>
    </div>
);

Answer 1

将 nodeId 传入 nodeTypesId 将 re-render 所有节点的样式。

您需要做的是更改点击时背景颜色的状态。我建议为你的 Circle Node 创建一个 React Element（它将包含一个 div 和一个带有所有必要 css 字段的样式元素），它在渲染时获取一个对象并设置 backgroundColor。

是否可以在反应流中通过 ID 更新自定义节点的颜色？

Is it possible to update the color of a custom node by ID in react-flow?

visualization

reactjs