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

作者

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

Call child’s function from a Parent component in React

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

  1. 将组件包装Child在一个forwardRef.
  2. 使用useImperativeHandle子项中的钩子向
    Child.
  3. 使用 ref 从 Parent 调用 Child 的函数，例如
    childRef.current.childFunction()。
应用程序.js
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
将 aref从Parent组件转发到Child.

该forwardRef方法接受一个以和 a作为参数的函数。 propsref

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

我们需要将 转发ref到 ，Child以便我们可以使用
useImperativeHandle
挂钩来自定义Parent
在使用ref.

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

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

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

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

  1. 在 Parent 组件中声明一个count状态变量。
  2. 将count变量添加到 Child.hook 的依赖项中useEffect。
  3. 增加countParent 中的 以重新运行孩子的useEffect.
应用程序.js
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组件声明一个count状态变量并将其作为 prop 传递给Child.

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

应用程序.js
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中声明并调用了 2 个函数。useEffect

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

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

该useEffect挂钩在组件安装时以及每次其依赖项之一发生更改时运行。

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

–