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

Question

我有两个组件CarouselComponent和BannerComponent嵌套到App Component。 我想在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>
); 

我想知道如何在所有情况下获得反应中的元素。

Answer 1

forwardRef是你需要在这里实现的。

• 首先，在BannerComponent组件中设置ref。
• 其次，在您的App组件中转发ref。
• 第三，在CarouselComponent组件中获取转发的ref。

---

或者，如果你仍然想使用dom，那么我可以想到这样做的可能方法：

内部App组件：

state = {
  domMounted: false //initial state
}

componentDidMount() {
  this.setState({domMounted: true})
}

这将确保您安装了完整的App组件，现在您可以访问子组件中的dom元素：

首先，传递像didMount={this.state.domMounted}这样的道具

<CarouselComponent didMount={this.state.domMounted}>

CarouselComponent组件：

const {didMount} = this.props
if(didMount) { // this will run on every render and finally get true
  document.getElementById("banner-div")
}

现在，你的onClick处理程序将不会获得null元素，事件将正常工作。

Answer 2

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

CarouselComponent

class CarouselComponent extends React.Component{

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

}