如何獲得子組件的節點/引用？

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 />

不需要功能