在花了這么多時(shí)間來(lái)解決這個(gè)問(wèn)題后,我感覺(jué)自己很愚蠢,但是我想把答案發(fā)出來(lái),以防其他人遇到類似的問(wèn)題。
問(wèn)題與React的渲染過(guò)程有關(guān)。每當(dāng)媒體查詢更新時(shí),<Modal/>
會(huì)重新渲染,這在移動(dòng)設(shè)備上更改方向時(shí)會(huì)發(fā)生。因此,當(dāng)模態(tài)框在方向更改時(shí)重新渲染時(shí),視頻會(huì)關(guān)閉。我不確定為什么媒體查詢會(huì)導(dǎo)致重新渲染(可能與ChakraUI hooks的設(shè)置有關(guān)),如果有人遇到這個(gè)問(wèn)題,也許可以詳細(xì)說(shuō)明一下。但是,切換到狀態(tài)解決了問(wèn)題。
解決方法很簡(jiǎn)單:
const [wIsSmallerThan48em] = useMediaQuery("(max-width: 48em)"); const [hIsSmallerThan30em] = useMediaQuery("(max-height: 30em)"); const [showModal, setShowModal] = useState(false); useEffect(() => { if (wIsSmallerThan48em || hIsSmallerThan30em){ setShowModal(true) } else { setShowModal(false) } }, [wIsSmallerThan48em, hIsSmallerThan30em]) // 在移動(dòng)設(shè)備上無(wú)論是縱向還是橫向都渲染“錯(cuò)誤”模態(tài)框 if (showModal){ return ( <Modal> <Video src={MyVideo} /> </Modal> ) } else { return ( <Visualizer /> ) }