关于前端:在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实例。