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

横幅组件

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

}

Answer 2

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

首先，在BannerComponent组件中设置ref。
第二，在您的App组件中转发参考。
第三，在CarouselComponent组件中获取转发的参考。

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

内部应用程序组件：

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元素，并且该事件将正常运行。

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

2 个答案: