React-Flow：您可以将 props 传递给 React-Flow 中的自定义节点吗？

Question

我使用 React-Flow 来可视化 React 中组件的树形层次结构。每当您在 React-Flow 中创建自定义节点时，您都​​会在树中使用它，如下所示：

  <ReactFlow
      onLoad={onLoadTree}
      elements={nodesAndEdges}
      nodeTypes={{ reactComponent: ComponentNode }}

这使得无法传递道具。假设我想传递一些东西，那么如果语法类似于 ，我就可以做到这一点reactComponent: <ComponentNode myProps={myProps} />。有没有人以前使用过这项技术并且知道是否可以通过某种方式将道具传递给自定义节点？：） 谢谢！

Answer 1

你可以这样做

const YourComponent = () => {
  const componentNode = { reactComponent: (props) => <ComponentNode myProp="myProps" {...props} />};

  return (
    <ReactFlow
      onLoad={onLoadTree}
      elements={nodesAndEdges}
      nodeTypes={componentNode}
    />
  );
};

在这里，通过 props 你可以获得预定义的 props，如 data、id 等。