即使在带有 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元素。