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组件访问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 />

不需要功能

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

1 个答案: