javascript - 如何从另一个组件定位组件内的 ref？

Question

我在 React.Components 之间的通信遇到了一些问题，我希望有人能帮助我。

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

谁能帮帮我？我在下面提供了一些示例代码，我想在导航链接的 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>
    );
}

Answer 1

好吧，为什么不将 Navigationbar 组件放在容器中。然后你可以简单地将 refs 作为 props 传递给 Navigationbar。因此，例如，您可以尝试这样做:

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>
)}};

在你的 Navigationbar 组件中:

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>
    );
}