如何在React的NavigationBar组件中获取Container子组件的ref？

嘿，我来帮你搞定这个跨组件获取ref的难题！你的场景是Container类组件里包含了Contact、More、About等子组件并设置了ref，现在需要在独立的NavigationBar组件中拿到这些ref来执行操作对吧？下面给你几个实用的解决方案，按需选择：

方案1：通过共同父组件中转（最直观的方式） #

如果NavigationBar和Container是同级组件（比如都在App组件下），可以利用它们的共同父组件来传递ref。核心思路是让Container把内部子组件的ref传递给父组件，再由父组件把ref传给NavigationBar。

步骤1：在Container中暴露子组件ref #

修改Container组件，通过props的回调函数把内部子组件的ref传递给父组件：

class Container extends React.Component {
  // 创建子组件的ref
  contactRef = React.createRef();
  moreRef = React.createRef();
  aboutRef = React.createRef();

  componentDidMount() {
    // 组件挂载后，把ref集合传给父组件
    this.props.onRefsReady({
      contact: this.contactRef,
      more: this.moreRef,
      about: this.aboutRef
    });
  }

  render() {
    return (
      <div className="container">
        <Contact ref={this.contactRef} />
        <More ref={this.moreRef} />
        <About ref={this.aboutRef} />
      </div>
    );
  }
}

步骤2：父组件接收并传递ref给NavigationBar #

假设共同父组件是App，在App中接收Container传来的ref，再通过props传递给NavigationBar：

class App extends React.Component {
  state = {
    childComponentRefs: null
  };

  // 接收Container传来的ref
  handleRefsReady = (refs) => {
    this.setState({ childComponentRefs: refs });
  };

  render() {
    return (
      <div className="app">
        {/* 把ref传给NavigationBar */}
        <NavigationBar componentRefs={this.state.childComponentRefs} />
        <Container onRefsReady={this.handleRefsReady} />
      </div>
    );
  }
}

步骤3：在NavigationBar中使用ref #

现在NavigationBar就能通过props拿到ref，执行你需要的操作了（比如滚动到对应组件）：

class NavigationBar extends React.Component {
  scrollToContact = () => {
    // 先判断ref是否存在，避免报错
    if (this.props.componentRefs?.contact.current) {
      this.props.componentRefs.contact.current.scrollIntoView({
        behavior: 'smooth'
      });
    }
  };

  render() {
    return (
      <nav className="navbar">
        <button onClick={this.scrollToContact}>跳转到Contact</button>
        {/* 同理可以添加More、About的跳转按钮 */}
      </nav>
    );
  }
}

方案2：使用React Context共享ref（适合深层组件结构） #

如果你的组件层级比较深，用props层层传递ref太繁琐，可以用React Context来全局共享这些ref，让NavigationBar直接从Context中获取。

步骤1：创建Context #

先定义一个专门用来共享ref的Context：

const ComponentRefsContext = React.createContext(null);

步骤2：在父组件中提供Context值 #

还是以App作为父组件，把拿到的ref作为Context的value提供给子组件：

class App extends React.Component {
  state = {
    childComponentRefs: null
  };

  handleRefsReady = (refs) => {
    this.setState({ childComponentRefs: refs });
  };

  render() {
    return (
      <ComponentRefsContext.Provider value={this.state.childComponentRefs}>
        <NavigationBar />
        <Container onRefsReady={this.handleRefsReady} />
      </ComponentRefsContext.Provider>
    );
  }
}

步骤3：在NavigationBar中消费Context #

在NavigationBar中通过contextType（类组件）或useContext（函数组件）获取ref：

// 类组件方式
class NavigationBar extends React.Component {
  // 绑定Context
  static contextType = ComponentRefsContext;

  scrollToAbout = () => {
    if (this.context?.about.current) {
      this.context.about.current.scrollIntoView({ behavior: 'smooth' });
    }
  };

  render() {
    return (
      <nav>
        <button onClick={this.scrollToAbout}>跳转到About</button>
      </nav>
    );
  }
}

// 函数组件方式（如果NavigationBar是函数组件）
function NavigationBar() {
  const componentRefs = React.useContext(ComponentRefsContext);

  const scrollToMore = () => {
    if (componentRefs?.more.current) {
      componentRefs.more.current.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <nav>
      <button onClick={scrollToMore}>跳转到More</button>
    </nav>
  );
}

方案3：用useImperativeHandle封装ref（更安全的方式） #

如果不想直接暴露DOM元素的ref，可以用forwardRef和useImperativeHandle（适合函数式子组件）来封装需要的方法，让NavigationBar只调用你暴露的方法，而不是直接操作DOM。

步骤1：子组件封装方法 #

以Contact为例，用forwardRef和useImperativeHandle暴露需要的操作：

const Contact = React.forwardRef((props, ref) => {
  const contactElement = React.useRef(null);

  // 暴露自定义方法给父组件的ref
  React.useImperativeHandle(ref, () => ({
    scrollTo: () => {
      contactElement.current.scrollIntoView({ behavior: 'smooth' });
    },
    // 还可以暴露其他你需要的方法
    focus: () => {
      contactElement.current.focus();
    }
  }));

  return <div ref={contactElement} className="contact-section">Contact内容</div>;
});

步骤2：后续传递逻辑和方案1/2一致 #

Container拿到的ref就是你封装的方法集合，传递给NavigationBar后，直接调用方法即可：

// NavigationBar中的使用示例
scrollToContact = () => {
  this.props.componentRefs?.contact.current?.scrollTo();
};

小提醒 #

尽量避免过度依赖ref操作DOM，优先通过React的状态和props来控制组件行为。如果必须用ref，也要做好空值判断，避免组件未挂载时调用ref导致报错。

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