我有两个组件 CarouselComponent 和 BannerComponent 嵌套到 App 组件。我想在 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)
}
}
forwardRef是你需要在这里实现的东西。
或者，如果您仍然想使用 dom，那么我可以想到这样做的可能方法：
内部应用组件：
state = {
domMounted: false //initial state
}
componentDidMount() {
this.setState({domMounted: true})
}
这将确保您的完整 App 组件已安装，现在您可以访问子组件内的 dom 元素：
首先，通过props像 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 元素并且该事件将正常工作。