Javascript 如何从另一个组件中定位组件内部的引用？

我在React.组件之间的通信方面遇到了一些问题，我希望有人能帮我解决

我创建了一个组件容器，其中包含许多其他子组件，比如Contact、More、About等等（我正在创建一个单页网站，因此创建了容器类）。在这些子组件中，我设置了一个引用。现在问题来了。我试图从另一个组件导航栏获取这些子组件，因为我需要将它们用于“滚动到组件”功能，但我不知道如何定位它们

有人能帮我吗？我在下面提供了一些示例代码，我想在导航链接中使用scrollToComponent方法中的ref：

import Home from './ui/Home';
import About from './ui/About';
import Contact from './ui/Contact';
export default class Container extends React.Component {
render() {
return (
  <div>
    <Home ref={(Component) => { this.Home = Component; }} />
    <About ref={(Component) => { this.About = Component; }} />
    <Contact ref={(Component) => { this.Contact = Component; }} />
  </div>
)}};


export default class Navigationbar extends React.Component {
render() {
    return (
        <nav className="navbar">
            <Link to="/"><img src={HomeIcon} alt="home-button"
                onClick={() => scrollToComponent(this.refs.Home))}/>
            </Link>
            <Link to="/about"><img src={AboutIcon} alt="about-button" 
                onClick={() => scrollToComponent(this.refs.About))}
            /></Link>
        </nav>
    );
}

从“/ui/Home”导入主页；
从“/ui/About”导入关于；
从“/ui/Contact”导入联系人；
导出默认类容器扩展React.Component{
render（）{
返回(
{this.Home=Component；}}/>
{this.About=Component；}}/>
{this.Contact=Component；}}/>
)}};
导出默认类Navigationbar扩展React.Component{
render（）{
返回(
scrollToComponent（this.refs.Home））}/>
scrollToComponent（this.refs.About））}
/>
);
}

---

}

那么，为什么不将导航栏组件放在容器中呢。然后，您可以简单地将refs作为道具传递到导航栏。例如，您可以尝试以下方法：

import Home from './ui/Home';
import About from './ui/About';
import Contact from './ui/Contact';
import Navigationbar from './pathtp/navigationbar';
export default class Container extends React.Component {
render() {
return (
  <div>
    <Navigationbar
      homeRef={this.Home}
      aboutRef={this.About}
      contactRef={this.Contact}
    />
    <div>
      <Home ref={(Component) => { this.Home = Component; }} />
      <About ref={(Component) => { this.About = Component; }} />
      <Contact ref={(Component) => { this.Contact = Component; }} />
    </div>
  </div>
)}};

从“/ui/Home”导入主页；
从“/ui/About”导入关于；
从“/ui/Contact”导入联系人；
从“/pathtp/Navigationbar”导入导航栏；
导出默认类容器扩展React.Component{
render（）{
返回(
{this.Home=Component；}}/>
{this.About=Component；}}/>
{this.Contact=Component；}}/>
)}};

在导航栏组件中：

export default class Navigationbar extends React.Component {
render() {
    return (
        <nav className="navbar">
            <Link to="/"><img src={HomeIcon} alt="home-button"
                onClick={() => scrollToComponent(this.props.homeRef))}/>
            </Link>
            <Link to="/about"><img src={AboutIcon} alt="about-button" 
                onClick={() => scrollToComponent(this.props.aboutRef))}
            /></Link>
        </nav>
    );
}

导出默认类导航栏扩展React.Component{
render（）{
返回(
scrollToComponent（this.props.homeRef））}/>
scrollToComponent（this.props.aboutRef））}
/>
);
}

谢谢！除了一件小事之外，这似乎起了作用。在触发事件之前，链接有时需要多次单击。你知道为什么会这样吗？我不太清楚为什么会这样。可能与DOM呈现有关。渲染DOM后，参照将变为活动参照。在此之前，它们应该为空。在onClick处理程序中记录ref可能会很有趣，以查看是否正确加载了ref。如果我的回答对你有帮助，那么你最好把它标为被接受，并用嘲讽的口吻向上投票；）谢谢，我很乐意投票表决。当我在console.log中记录ref时，它会在不起作用的点击上显示undefined，然后突然它起作用并打印出正确的道具。你知道这个问题的解决办法吗啊，这正是我所期待的。据我所知，您无法真正做到这一点，因为您必须等待DOM完成渲染才能使用REF。但是，如果ant要完成的只是滚动，那么您可以尝试一下react scroll。这是一个npm软件包，旨在做到这一点；）谢谢但就我所见，react scroll包不支持滚动到特定组件的功能，还是我错了？