迹忆客 专注技术分享

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

1. 将 Child 组件包装在 forwardRef 中。
2. 在 child 中使用 useImperativeHandle 钩子来为 Child 添加一个函数。
3. 使用 ref 从 Parent 调用 Child 的函数，例如 childRef.current.childFunction()。

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>
  );
}

我们使用 forwardRef 将 ref 从 Parent 组件转发到 Child。

forwardRef 方法接受一个以 props 和 ref 作为参数的函数。

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

我们需要将 ref 转发给 Child，这样我们就可以使用 useImperativeHandle 钩子来自定义在使用 ref 时暴露给 Parent 组件的 Child 的实例值。

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

呈现 <Child ref={childRef} /> 的父组件将能够调用 childFunction1 作为 childRef.current.childFunction1()。

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

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

1. 在 Parent 组件中声明一个计数状态变量。
2. 将 count 变量添加到 Child 中 useEffect 钩子的依赖项中。
3. 增加 Parent 中的计数以重新运行子项的 useEffect。

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');
    };

    // 👇️ don't run on initial render
    if (count !== 0) {
      childFunction1();

      childFunction2();
    }
  }, [count]);

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

export default function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(current => current + 1);
  };

  return (
    <div>
      <Child count={count} />

      <h2>parent content</h2>

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

Parent 组件声明一个计数状态变量并将其作为 prop 传递给 Child。

我们将 count 变量添加到 useEffect 钩子的依赖项中，因此每次它发生变化时，我们传递给 useEffect 的函数都会运行。

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

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

  // 👇️ don't run on initial render
  if (count !== 0) {
    childFunction1();

    childFunction2();
  }
}, [count]);

Child 组件在 useEffect 钩子中声明并调用了 2 个函数。

Parent 可以通过更改 count 状态变量来运行 Child 的 useEffect 钩子中的逻辑。

请注意 ，我们在调用 useEffect 中的函数之前检查 count 是否不等于 0。

useEffect 钩子在组件安装时运行，并且每次其依赖项之一发生更改时运行。

如果我们不想在挂载时运行逻辑，请在调用函数之前检查 count 变量是否不等于 0。