Question

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

我创建了一个组件Container，它包含很多其他子组件，比如Contact，More，About等等（我正在创建一个单页网站，因此是Container类）。在这些儿童组件我已经设置了参考。现在出现了问题。我试图从另一个组件NavigationBar中获取这些子组件，因为我需要将它们用于＆＃34;滚动到组件＆＃34; -feature，但我不知道如何定位它们。

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

   <p-cellEditor>
       <ng-template pTemplate="input">
           <mat-checkbox [(ngModel)]="rowData.ecommerceEnabled" (change)="loadPayForCheckbox($event, rowData._links.self.href)">
            </mat-checkbox>
       </ng-template>
        <ng-template pTemplate="output">
             <span class="ui-column-title">{{'paymenttype.table.headers.ecommerceenabled' | translate}} 
            </span>
             <mat-checkbox [(ngModel)]="rowData.ecommerceEnabled"></mat-checkbox>
        </ng-template>
    </p-cellEditor>
</td>

}

Answer 1

那么，为什么不将Navigationbar组件放在容器中。然后你可以简单地将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>
)}};

在导航栏组件中：

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

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

1 个答案: