在單擊事件的反應函數組件中定義的調用函數形成另一個函數組件 - 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 （連同它使用的狀態項）的父對象，並將所需的部分作為道具傳遞給使用它們的組件。

那個“父對象”可以是一個共同祖先組件，或一個上下文（如果從父級到子級的鏈使得將道具一直向下傳遞變得很麻煩）。