React 中如何从父组件调用子方法？

从父组件调用子方法

在 React 中，并不总是需要直接调用子方法。但是，在某些情况下可能有必要，例如当子组件公开命令式方法时。本文演示了如何使用 refs 来实现这一点，无论是基于类的组件还是功能组件。

基于类的组件

要使用 refs 从基于父类的组件调用子方法，请按照以下步骤操作：

1. 使用以下命令在父组件中创建引用createRef():

const childRef = React.createRef();

2. 将 ref 分配给子组件：

<Child ref={childRef} />

3. 使用 childRef 访问子组件的方法:

childRef.current.getAlert();

功能组件Hooks

随着 React Hooks 的引入，您现在也可以在功能组件中使用 refs。以下是如何使用引用从父功能组件调用子方法：

1. 使用 useRef() 挂钩创建引用：

const childRef = useRef();

2. 将子组件包裹在forwardRef中以访问ref:

const Child = forwardRef((props, ref) => {
  // ...
});

3. 使用 useImperativeHandle 钩子将子级的方法公开给父级：

useImperativeHandle(ref, () => ({ getAlert() { alert('clicked'); } }));

4. 使用 childRef 访问孩子的方法：

childRef.current.getAlert();

注意： 需要注意的是，在 React 中通常不鼓励使用 ref 来调用子方法。更好的做法是通过 props 和 state 向下传递数据并向上传递事件。

以上是React 中如何从父组件调用子方法？的详细内容。更多信息请关注PHP中文网其他相关文章！