在react js中，当窗口大小改变时添加或移除class

Question

我正在使用react js进行一个项目，每当窗口大小发生变化时，我在添加和删除元素中的类时遇到麻烦。我在页面中呈现了3个div元素，当屏幕小于或等于768时，只有一个div元素应该显示，其他两个元素只有在单击按钮时才会显示。好吧，它工作得很好，但我得到这个错误之前的页面渲染每次我改变浏览器的大小。TypeError:无法读取null属性(正在读取classList)我想使用useState或useEffect，但我不知道如何做，添加或删除类时，窗口大小的变化。需要添加或删除的类包含display none和display block。有人能帮帮我吗?我只需要知道如何添加或删除类每当窗口大小改变

window.addEventListener('resize', function(event){
if(window.innerWidth <= 768){
document.getElementById("details").classList.remove("toggle-details");
document.getElementById("convo").classList.remove("toggle-convo");
document.getElementById("chats").classList.remove("toggle-chats");
}
else{
document.getElementById("chats").classList.add("chats");
document.getElementById("chats").classList.remove("toggle-chats");
document.getElementById("details").classList.add("details");
document.getElementById("details").classList.remove("toggle-details");
document.getElementById("convo").classList.add("convo");
document.getElementById("convo").classList.remove("toggle-convo");

}
});

Answer 1

您可以使用useState()更新状态，并设置宽度。每当窗口调整大小时，调用setWidth来更新它，然后根据宽度是否大于768在渲染中设置类

你可以这样写:

const Component = () => {
const [width, setWidth] = useState(window.innerWidth)
window.addEventListener('resize', function(event){
setWidth(window.innerWidth)
}
return (
<div className={width <= 768 ? "class1" : "class2 class3"}>
</div> 
)
}

Answer 2

我建议使用状态来检测大小。

,

const sample = () => {
const [size, setSize] = setState(window.innerWidth)

return <div className={size<= 768 ? 'classOne' : 'otherClass'}></div>
}

然后尝试使用像react-resize-detector这样的库，您可以通过向元素添加引用来获得大小。

如果你不想使用第三方库，你需要检测componentDidMount或useEffect内部的大小变化。

,

useEffect(() => {
const updateWindowDimensions = () => {
setSize(window.innerWidth)
}
window.addEventListener('resize', updateWindowDimensions)
return () => window.removeEventListener('resize', updateWindowDimensions)
}, [])