React中无需在中间组件定义方法，如何跨层级调用孙组件方法？

嘿，这个场景我太熟悉了！除了你目前用的传递listRef属性的方式，还有几个更优雅的解决方案，尤其是React 16.3+推出的新特性，能让你不用在UsersList里额外定义任何方法，直接拿到内部List组件的实例：

1. 首选：使用React.forwardRef（推荐） #

这是React官方专门为「组件透传ref」场景设计的API，完美匹配你的需求。只需要把UsersList改造成一个转发ref的组件，直接把外部传入的ref传递给内部的List即可：

// 改造UsersList，用forwardRef转发ref到内部的List
const UsersList = React.forwardRef((props, ref) => {
  // 把外部的ref直接绑定到List组件上
  return <List ref={ref} {...props} />;
});

// 在FriendsPage里直接使用ref获取List实例
class FriendsPage extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个ref用来存储List实例
    this.listRef = React.createRef();
  }

  // 示例：调用List的方法
  handleScrollToTop = () => {
    this.listRef.current.scrollTo();
  };

  render() {
    return (
      <div>
        <button onClick={this.handleScrollToTop}>滚动到顶部</button>
        {/* 把ref传给UsersList，它会自动转发给内部的List */}
        <UsersList ref={this.listRef} {...this.props} />
      </div>
    );
  }
}

这样一来，FriendsPage里的listRef.current直接就是List组件的实例，你可以直接调用scrollTo()、clear()这些方法，完全不需要在UsersList里做任何额外的方法封装。

2. 多层嵌套场景：使用Context #

如果你的组件层级比现在更深，或者有多个组件需要访问同一个List实例，用Context会更方便。通过Context把List的实例共享给上层组件：

// 先创建一个Context
const ListInstanceContext = React.createContext(null);

// 改造UsersList，把List的实例放到Context里
class UsersList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  render() {
    return (
      <ListInstanceContext.Provider value={this.listRef.current}>
        <List ref={this.listRef} {...this.props} />
      </ListInstanceContext.Provider>
    );
  }
}

// 在FriendsPage里通过Context获取List实例
class FriendsPage extends React.Component {
  // 绑定Context
  static contextType = ListInstanceContext;

  handleClearList = () => {
    // 直接从context里拿到List实例并调用方法
    if (this.context) {
      this.context.clear();
    }
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClearList}>清空列表</button>
        <UsersList {...this.props} />
      </div>
    );
  }
}

这个方式适合复杂的组件树，但如果只是FriendsPage→UsersList→List这三层，forwardRef会更轻量简洁。

3. 旧版本兼容：回调ref透传 #

如果你还在使用React 16.3之前的版本，没办法用forwardRef，可以用回调ref的方式透传，其实和你现在用的listRef属性思路一致，但写法更简洁：

// FriendsPage里定义一个设置ref的回调
class FriendsPage extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = null;
    this.setListRef = (ref) => {
      this.listRef = ref;
    };
  }

  handleScroll = () => {
    this.listRef.scrollTo();
  };

  render() {
    return <UsersList setListRef={this.setListRef} {...this.props} />;
  }
}

// UsersList里直接把回调传给List的ref
class UsersList extends React.Component {
  render() {
    return <List ref={this.props.setListRef} {...this.props} />;
  }
}

本质上和你当前的方案一样，但用回调函数的方式更符合React早期的ref使用习惯。

总结一下：如果你的项目已经升级到React 16.3+，forwardRef是最优解，代码简洁且符合React的设计意图；如果是旧版本，就用回调ref透传；复杂嵌套场景再考虑Context。

内容的提问来源于stack exchange，提问作者Bhullnatik