React技巧之调用子组件函数

原文链接：https://bobbyhadz.com/blog/react-call-function-in-child-component[1]

作者：Borislav Hadzhiev[2]

正文从这开始~

forwardRef

在React中，从父组件中调用子组件的函数：

1. 在forwardRef 中包裹一个子组件。
2. 在子组件中使用useImperativeHandle钩子，来为子组件添加一个函数。
3. 在父组件中使用ref来调用子组件的函数。比如说，childRef.current.childFunction() 。

代码语言：javascript复制

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

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childFunction1() {
      console.log('child function 1 called');
    },
    childFunction2() {
      console.log('child function 2 called');
    },
  }));

  return (
    <div>
      <h2>child content</h2>
    </div>
  );
});

export default function Parent() {
  const childRef = useRef(null);

  const handleClick = () => {
    childRef.current.childFunction1();

    childRef.current.childFunction2();
  };

  return (
    <div>
      <Child ref={childRef} />

      <h2>parent content</h2>

      <button onClick={handleClick}>Call child functions</button>
    </div>
  );
}

call-child-function-from-parent.gif

我们使用forwardRef 将父组件的ref转发给子组件。forwardRef 方法接收一个函数，该函数接收props和ref作为参数。

传递给forwardRef 的函数应该返回一个React节点。

我们需要转发ref到子组件，这样我们就可以使用useImperativeHandle钩子来自定义子组件的实例值，当使用ref时，该实例值被公开给父组件。

代码语言：javascript复制

useImperativeHandle(ref, () => ({
  childFunction1() {
    console.log('child function 1 called');
  },
  childFunction2() {
    console.log('child function 2 called');
  },
}));

渲染<Child ref={childRef} />的父组件，将能够以childRef.current.childFunction1()的方式来调用childFunction1。

或者，你可以使用更间接的方法。

useEffect

在React中，从父组件中调用子组件的函数：

1. 在父组件中声明一个count state 变量。
2. 在子组件中，添加count变量为useEffect钩子的依赖。
3. 在父组件中增加count变量的值，以重新运行子组件的useEffect。

代码语言：javascript复制

import {useEffect, useState} from 'react';

const Child = ({count}) => {
  useEffect(() => {
    const childFunction1 = () => {
      console.log('child function 1 called');
    };

    const childFunction2 = () => {
      console.log('child function 2 called');
    };

    // 


	

编程算法 https 网络安全 react 


	




	
 0 人点赞