在单击事件的反应函数组件中定义的调用函数形成另一个函数组件 - React.js

Question

我正在函数（prepareNodes）中构造一些节点对象以传递给功能组件A（比如说）中的React Flow，并且我定义了一个无状态的自定义节点组件（CardNode），它有一个按钮。 单击按钮时，它应该触发组件 A 中定义的函数（prepareNodes）。

    function ComponentA = ({ selectedNodes }) => {
    
         const reactFlowWrapper = useRef(null);
    
         const [elements, setElements] = useState([]);
         const [edges, setEdges] = useState([]);
   
         const prepareNode = async (nodeid) => {
            //some service calls to fetch data and constuct nodes
            setElements([ ...nodes]);
            setEdges([...edges]);
         }

       return (
        <ReactFlowProvider>
          <div className="reactflow-wrapper" ref={reactFlowWrapper}>
            <ReactFlow
              nodes={elements}
              edges={edges}
              //some properties
            >
            </ReactFlow>
          </div>
        </ReactFlowProvider>
       )
   };
   export default ComponentA;


   function CardNode({ data }) {
  
    const renderSubFlowNodes = (id) => {
      console.log(id);
      //prepareNode(id)
    }
  
    return (
        <>
          <Handle type="target" position={Position.Top} />
          <div className="flex node-wrapper">
              <button className="btn-transparent btn-toggle-node" href="#" onClick={() => renderSubFlowNodes(data['id']) }>
                  <div> 
                      <img src={Icon}/>    
                  </div>
              </button>
          </div>
          <Handle type="source" position={Position.Bottom}/>
       </>
    );
  }
  
  export default CardNode;

我在网上找了一些参考资料，他们中的大多数都建议将这个可重用函数移出组件，但是由于这个函数带有一个使用 useState 钩子直接设置到 ReactFlow 的状态，我认为这不会有太大帮助.

其他参考资料谈到使用 useCallback 或 useRefs 和 forwardRef，useImperativeHandle 特别是对于功能组件，我不太了解。

有人可以为我的这个特定用例建议我一个解决方案或解决方法吗？

Answer 1

您可以将 onClick 处理程序添加到每个节点，并在节点视图中单击时调用此处理程序。

在 onClick 处理程序的父组件中，您可以根据需要调用 prepareNode。

useEffect(() => {
setElements(
  elements.map(item => {
    ...item,
    onClick: (i) => {
      console.log(i);
      prepareNode();
    },
  })
)}, 
[]);

Answer 2

经典的方法是拥有一个定义prepareNode （连同它使用的状态项）的父对象，并将所需的部分作为道具传递给使用它们的组件。

那个“父对象”可以是一个共同祖先组件，或一个上下文（如果从父级到子级的链使得将道具一直向下传递变得很麻烦）。