我试图在我的项目中遵循这个例子,但我无法让它工作https://react-slick.neostack.com/docs/example/as-nav- 因为我认为原因是:
- 它需要两个对象的引用来同步它们
- 它应该与 componentDidMount() 中设置的状态同步
- 设置状态时,参考未定义
我认为 ref 回调应该在 componentDidMount() 之前执行,但事实并非如此:
我的代码位:
Component {
state = {
topNav: null,
bottomNav: null
}
componentDidMount () {
console.log("componentDidMount being called : slider1 : " + this._topSlider + " slider 2 : " + this._bottomSlider)
this.setState({
topNav: this._topSlider,
bottomNav: this._bottomSlider
});
}
render() {
console.log("render being called")
...
<Slider
asNavFor={this.state.bottomNav}
ref={(slider) => {
this._topSlider = slider
console.log("topslider ref being called" + this._topSlider )
}}
>
...
</Slider>
<Slider
asNavFor={this.state.topNav}
ref={(slider) => {
this._bottomSlider = slider
console.log("bottomslider ref being called"+this._bottomSlider)
}}
slidesToShow={3}
swipeToSlide={true}
focusOnSelect={true}
>
...
</Slider>
...
}
这些是日志: