关于前端:在hook里面使用回调refs

问题剖析

我的项目中须要写一个能够左右滑动的序号选择器，用到了 react-slick 组件, 然而要可能通过我本人的分页器来管制滑动的切换，这时候就须要用到回调 refs，从组件外部获取实例。在 class 组件中很容易实现，就是间接在构造函数内退出 this.refsss = React.createRef() 就能够承受了。然而我应用的是函数式组件的写法，外部是无奈应用 this 来指向以后实例的。与浴室就有了上面的骚操作。

具体代码

// 左右滑动序号的组件
const RevisionOrder = ({order}) => {
  // 定义一个初始化的数组
  const arr = [1, 2, 3, 4, 5, 6, 7, 8]

  // 初始化定义 ref
  const [slide, setSlide] = useState(useRef(null))

  // 这是 react-slide 组件用到的一些设置
  const settings = {
    dots: false,
    infinite: false,
    slidesToShow: 7,
    slidesToScroll: 1,
    arrows: false,
  }

  // 监听内部传入的数据和 slide 的变动，从而触发 slide 外部的函数
  useEffect(() => {slide.context && slide.slickGoTo(Number(order - 1))
  }, [order, slide])

  return (
    <Slider
      {...settings}
      // 回调 refs
      ref={(slider) => {
        // 应用 setSlide 函数来更新原有的空 ref
        setSlide(slider)
      }}
    >
      {arr.map((item) => {
        return (<button key={item} className={styles.tabs_btn}>
            {item}
          </button>
        )
      })}
    </Slider>
  )
}

次要是利用了 hook 中的 useState 和 useRef 来初始化 ref 实例。