hookでコールバックrefsを使う

1218 ワード

もんだいぶんせき
項目には左右にスライド可能なシーケンスセレクタを書く必要があり、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 (
     {
        //    setSlide          ref
        setSlide(slider)
      }}
    >
      {arr.map((item) => {
        return (
          
        )
      })}
    
  )
}

主にhookのuseStateおよびuseRefを用いてrefインスタンスを初期化した.