在hook里面使用回调refs

Posted 2021-10-04 Cyearn

问题分析

项目中需要写一个可以左右滑动的序号选择器，用到了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实例。