ReactJS 父组件获取子组件Ref并操作：完整指南与示例

在React中，你可以通过使用React.createRef()创建一个ref对象，并将其传递给子组件的ref属性。然后，在父组件中，你可以通过遍历子组件的数组，访问每个子组件的ref来执行操作。

下面是一个示例，演示了如何在父组件中获取子组件的ref，并对其进行操作：

import React, { Component, createRef } from 'react';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.childRefs = Array(5).fill().map(() => createRef());
  }

  handleButtonClick = () => {
    // 在这里可以访问子组件的ref并执行操作
    this.childRefs.forEach(ref => {
      console.log(ref.current); // 子组件的ref对象
      // 对ref执行操作
    });
  }

  render() {
    return (
      <div>
        {this.childRefs.map((ref, index) => (
          <ChildComponent key={index} ref={ref} />
        ))}
        <button onClick={this.handleButtonClick}>操作子组件</button>
      </div>
    );
  }
}

class ChildComponent extends Component {
  // 子组件的实现
}

export default ParentComponent;

在上面的示例中，ParentComponent通过this.childRefs数组来存储子组件的ref。在handleButtonClick方法中，我们可以通过遍历childRefs数组来访问每个子组件的ref，并执行所需的操作。

请注意，在使用ref时，你需要确保子组件是一个class组件或forwardRef封装的函数组件，因为函数组件默认不支持ref。