如何在React.js中获取另一个组件的元素？

• Z时代
• 2024-01-10
• 分类：问答

我有两个嵌套在App

Component上的CarouselComponent和BannerComponent组件。我想在CarouselComponent中获得BannerComponent中的元素以进行滚动功能。

代码在这里；

-– App.js

....
<App>
   <BannerComponent />
   <CarouselComponent />
</App>
....

-– BannerComponent.js

...
return(
<div className="banner-div" id="banner-div">
</div>
);
...

-– CarouselComponent.js

...
scrollTo() {
  document.getElementById("banner-div") //  This doesn't work
}
...
return(
<a onClick={this.scrollTo}></a>
);

我想知道在所有情况下如何在React js中获取元素。

回答：

React ref 将在这里工作。

class SomeComp extends React.Component{
constructor(){
    this.carRef = React.createRef(); //create ref
}
  render(){
    return(
      <div>
        <App>
          <BannerComponent  carRef={this.carRef}/> //pass ref in Banner Component to attach it to required DOM.
          <CarouselComponent carRef={this.carRef}/> //pass ref to CarouselComponent  to use it
        </App>
      </div>
    )
  }
}

class BannerComponent extends React.Component{
  render(){
    return(
      <div className="banner-div" id="banner-div"  ref={this.props.carRef}>
      </div>
    );
  }   
}

class CarouselComponent extends React.Component{
  scrollTo() {
    this.props.carRef.current.scrollTo(50)
  }
}

以上是 如何在React.js中获取另一个组件的元素？ 的全部内容， 来源链接： utcz.com/qa/425025.html