即使在帶有 React-slick (useRef) 的模態中，我也想訪問 dom

Question

目前，我正在使用 react-slick 來實現它。 我想用 useref (ref.cuurent) 訪問 slider dom，但是在模態打開的那一刻，它變成了 null。 您可以通過滑動訪問它。 我認為這可能是因為我在模態中訪問它。 模態打開時如何獲得 ref.cuurent？

export const index: React.FC = () => {
    const [isShowHowToModal, setIsHowToModal] = useState(true)

    return (
        <Box>
            <div>hello</div>
            {isShowHowToModal && <Modal setIsHowToModal={setIsHowToModal} />}
        </Box>
    )
}

import Slider from 'react-slick'

export const Modal = React.FC<Props>(setIsModal) => {
  
  const onClickCancel = () => {
    setIsModal(false)
  }

  const refs = useRef<Slider>(null)
  console.log(refs)

  const settings = {
    dots: false,
    infinite: false,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  }

  return (
    <Slider ref={refs} {...settings}>
      <div>aaa</div>
      <div>bbb</div>
      <div>ccc</div>
    </Slider>
}

如果您可以使用 function 組件來回答，那將會很有幫助。

Answer 1

嘗試訪問 useEffect 掛鈎中的 ref，現在您在 Slider 渲染之前將其記錄在第一個渲染中。

編輯：

在您的示例中，您有多個語法錯誤，它們可能是也可能不是您遇到問題的原因。 不管怎樣，看看這個沙箱，看看控制台，它成功地記錄了refs 。

旁注：如果您導出 React.FC 命名index並像這樣使用它<index> </index>它不會渲染組件，而是會嘗試查找並“索引”dom元素。