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

Question

我有两个嵌套在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中获取元素。

Answer 1

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

BannerComponent

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

}