如何在React.js中获取另一个组件的元素? [英] How can I get the element of another component in React.js?

问题描述

我有两个嵌套在App Component上的CarouselComponent和BannerComponent组件. 我想在CarouselComponent的BannerComponent中获取元素以进行滚动功能.

I have two components CarouselComponent and BannerComponent nested to App Component. I would liked to get the element in BannerComponent in CarouselComponent for scrolling function.

代码在这里；

--- App.js

--- App.js

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

--- BannerComponent.js

--- BannerComponent.js

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

-CarouselComponent.js

--- CarouselComponent.js

...
scrollTo() {
  document.getElementById("banner-div") //  This doesn't work
}
...

return(
<a onClick={this.scrollTo}></a>
); 

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

I wanna know how to get element in react js in all situations.

推荐答案

React ref 将在这里工作.

React ref will work here.

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

CarouselComponent

class CarouselComponent extends React.Component{

  scrollTo() {
    this.props.carRef.current.scrollTo(50)
  }

}

这篇关于如何在React.js中获取另一个组件的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！