javascript - React-Flow:您可以将 Prop 传递给 React-Flow 中的自定义节点吗？

Question

我正在使用 React-Flow 来可视化 React 中组件的树状层次结构。每当您在 React-Flow 中创建自定义节点时，您都​​可以像这样在树中使用它:

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

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

Answer 1

你可以这样做

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

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

这里通过 props 你可以得到预定义的 props，比如数据，id 等等。