在React中循序获取子组件ref的两种方法

2023-10-31 12:41:22

在React的实际项目开发中，有时我们需要在父组件中调用子组件的方法，而子组件又是通过循环生成的。尽管这种做法与React的设计哲学不太相符，但在开发过程中，我们确实可能会遇到这样的需求。因此，本文将为大家介绍两种解决方法，帮助您轻松实现这一功能。

第一方法：使用useRef和forwardRef组合

第一种方法是使用useRef和forwardRef结合的方式来获取子组件的ref。具体步骤如下：

在父组件中定义一个useRef变量，用于存储子组件的ref。
在子组件中使用forwardRef将子组件的ref传递给父组件。
在父组件中使用useImperativeHandle暴露子组件的方法。
在父组件中，通过useRef变量可以调用子组件的方法。

// 父组件
const ParentComponent = () => {
  const ref = useRef();

  return (
    <div>
      {/* 将useRef变量传递给子组件 */}
      <ChildComponent ref={ref} />
    </div>
  );
};

// 子组件
const ChildComponent = forwardRef((props, ref) => {
  // 使用forwardRef接收父组件传递的ref
  useImperativeHandle(ref, () => ({
    // 暴露子组件的方法
    callMe() {
      console.log('Hello from ChildComponent!');
    }
  }));

  return <div>This is a child component.</div>;
});

在上述代码中，我们首先在父组件中定义了一个ref变量ref，用于存储子组件的ref。然后在子组件中使用forwardRef接收父组件传递的ref。在子组件中，我们使用useImperativeHandle将子组件的方法暴露给父组件。最后，在父组件中，我们可以通过ref变量调用子组件的方法。

第二种方法：使用createRef()和callback ref

第二种方法是使用createRef()和callback ref的方式来获取子组件的ref。具体步骤如下：

在父组件中使用createRef()创建一个ref对象。
在子组件中将ref对象作为prop传递给子组件。
在子组件中使用callback ref来设置子组件的ref。
在父组件中，通过ref对象可以调用子组件的方法。

// 父组件
const ParentComponent = () => {
  const ref = createRef();

  return (
    <div>
      {/* 将ref对象作为prop传递给子组件 */}
      <ChildComponent ref={ref} />
    </div>
  );
};

// 子组件
const ChildComponent = (props) => {
  const { ref } = props;

  // 使用callback ref来设置子组件的ref
  useEffect(() => {
    if (ref && ref.current) {
      ref.current.callMe();
    }
  }, [ref]);

  return <div>This is a child component.</div>;
};