React-Flow：您可以將道具傳遞給 React-Flow 中的自定義節點嗎？

Question

我正在使用 React-Flow 來可視化 React 中組件的樹狀層次結構。 每當您在 React-Flow 中創建自定義節點時，您都可以像這樣在樹中使用它：

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

這使得無法傳遞道具。 假設我想傳遞一些東西，那么如果語法類似於reactComponent: <ComponentNode myProps={myProps} /> ，我就能夠做到這一點。 有沒有人以前使用過這項技術並且知道是否可以通過某種方式將道具傳遞給自定義節點？ ：） 謝謝！

Answer 1

看來您可以在節點的data屬性中傳遞道具。

Answer 2

創建新節點時，您可以在 data 屬性部分傳遞所需的任何數據：

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

Answer 3

你可以這樣做

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

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

在這里通過 props，你可以得到預定義的 props，比如 data、id 等。

Answer 4

您好，2022 年 12 月：

withProps HOC：

import { createElement } from 'react';

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

export default withProps;

零件：

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


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