0

我试图在我的项目中遵循这个例子,但我无法让它工作https://react-slick.neostack.com/docs/example/as-nav- 因为我认为原因是:

  1. 它需要两个对象的引用来同步它们
  2. 它应该与 componentDidMount() 中设置的状态同步
  3. 设置状态时,参考未定义

我认为 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>
    ...
}

这些是日志:

在此处输入图像描述

类似问题: componentDidMount 在 ref 回调之前调用

4

0 回答 0