reactjs - 反应功能组件调用子组件方法

Question

我将ModalPopup组件作为父组件，并且根据某些条件将购物车和订单表单呈现为子组件。对于每个组件，我在 modalPopup 中有单独的按钮，一旦子组件在modalPopUp中更改，就会呈现这些按钮。

我想在单击下订单按钮时​​从ModalPopUp组件调用orderForm组件方法。

在控制台下订单时出现错误。

index.js:1 警告：函数组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

<ModalPopUp 
  show={isModalVisible} 
  hide={hideModal} 
  onCheckout={cartCheckout}
  onOrderPlaced={placeOrder}>
      {
       isCheckoutDone? <OrderForm ref={orderFormRef}/> :<Cart selectedProducts={selectedProducts}/>
      }
 </ModalPopUp>

请在此处参考stackblitz 示例代码。

Answer 1

为此，您需要forwardRef与useImperativeHandle

https://reactjs.org/docs/forwarding-refs.html

https://reactjs.org/docs/hooks-reference.html#useimperativehandle

import { forwardRef, useImperativeHandle, useRef } from 'react';

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, { func: () => { ... } }, []);

  return (...);
});

const Parent = () => {
  const childRef = useRef(null);

  const handleOnSomething = () => {
    if (childRef.current) {
      childRef.current.func();
    }
  }

  return (
    <Child ref={childRef} onSomething={handleOnSomething}
  )
}