在React中访问同级组件的refs

在React中，要访问同级组件的refs，可以通过使用回调函数或者React.createRef()来实现。

使用回调函数：在父组件中，可以通过将一个回调函数作为props传递给子组件，并在子组件中调用该回调函数并传递子组件的ref作为参数。这样父组件就可以访问子组件的ref。

示例代码如下：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = null;
  }

  getChildRef = (ref) => {
    this.childRef = ref;
  }

  render() {
    return (
      <div>
        <ChildComponent getRef={this.getChildRef} />
        <button onClick={() => this.childRef.focus()}>Focus Child Component</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = null;
  }

  componentDidMount() {
    this.props.getRef(this.inputRef);
  }

  render() {
    return (
      <input type="text" ref={(ref) => { this.inputRef = ref; }} />
    );
  }
}

在上面的例子中，ParentComponent通过getChildRef方法获取了ChildComponent的ref，并且在按钮的点击事件中调用了子组件的focus方法。

使用React.createRef()：在React 16.3及以上版本中，可以使用React.createRef()来创建一个ref对象，并将其赋值给组件的ref属性。然后可以通过该ref对象访问组件的实例。

示例代码如下：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={() => this.childRef.current.focus()}>Focus Child Component</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  render() {
    return (
      <input type="text" ref={this.inputRef} />
    );
  }
}

在上面的例子中，ParentComponent通过React.createRef()创建了一个ref对象，并将其赋值给ChildComponent的ref属性。然后可以通过该ref对象的current属性访问子组件的实例，从而调用子组件的方法。

这是React中访问同级组件的refs的两种常用方法。这些方法可以帮助您在React应用程序中有效地访问和操作组件。