hookでコールバックrefsを使う
1218 ワード
もんだいぶんせき
項目には左右にスライド可能なシーケンスセレクタを書く必要があり、
具体コード
主にhookの
項目には左右にスライド可能なシーケンスセレクタを書く必要があり、
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インスタンスを初期化した.