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 等。

Answer 2

创建新节点时，您可以在数据属性部分传递任何您想要的数据：

const newNode = {
  ...nodeProps,
  data: {
    myCustomProps: "test",
  },
}

Answer 3

withProps HOC：

import { createElement } from 'react';

const withProps = (WrappedComponent, additionalProps = {}) => 
    (props) => 
        createElement(WrappedComponent, {
            ...props,
            ...additionalProps,
        });


export default withProps;

成分：

const myNodeTypes= React.useMemo(() => ({
    myNode: withProps(myNode, { myProp }),
}), [myProp, myNode]);


<ReactFlow nodeTypes={myNodeTypes}>...</ReactFlow>

Answer 4

看来你可以在节点的

data

属性中传递 props。