如何获得子组件的节点/引用？

Question

所以我有了App.js，在其中渲染用于构建UI的所有组件，如下所示：

export default class App extends Component {
  render() {
    return (
      <div>
        <Header id='header' title="Nice title"/>
        <WelcomeScreen id='welcomeScreen'/>
        <Menu id='meniu'/>
      </div>
    );
  }
}

我想实现一个滚动间谍，但是我需要将Header组件中的nav节点访问到App.js中。 我尝试将ref设置为Header中的特定节点，如下所示：

<NavItem ref={(ref) => { this.homeScreen = ref; }}>
    <NavLink href='#welcomeScreen'>Despre noi</NavLink>
</NavItem>
<NavItem ref={(ref) => { this.menuScreen = ref; }}>
    <NavLink href='#meniu'>Meniu</NavLink>
</NavItem>

但是我不知道如何使用该引用来将它们放入滚动间谍中。

Answer 1

您需要设置一个唯一的参考

<NavItem ref="homeScreen"><Component /><NavItem />

不需要功能