单击事件上的React函数组件中定义的呼叫函数形式的另一个函数组件-RECT.JS

Question

我正在函数（preparEnodes）中构造一些节点对象，以传递以在功能组件A（假设）中进行反应流，并且我已经定义了一个自定义的节点组件（cardNode）无状态，该conseless nestence nestect nestect nestect nestect nestect nestect nestect nestect nestect nestect nestect nestect nestect。单击按钮，它应触发组件A中定义的函数（准备元素）。

    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钩子的反应流，我认为这不会有很大的帮助。

其他参考文献谈论了使用USECALLBACK或USEREFS和ForwardRef，尤其是对功能组件的使用，我对此不太了解。

有人可以建议我解决这个特定用例的解决方案。

Answer 1

您可以在每个节点中添加一个onclick处理程序，然后在节点视图中单击此处理程序。

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

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

Answer 2

经典方法是具有定义prepareNode（以及它使用的状态项目）的父对象，并将所需的碎片作为道具传递到使用它们的组件中。

该“父对象”可能是一个共同的符合组件，也可以是上下文（如果从父母到子女的链条使整个道具一直沿其传递使其繁琐）。