在反应js中更改窗口大小时添加或删除类答案

【问题标题】：add or remove class when the window size is changed in react js在反应js中更改窗口大小时添加或删除类
【发布时间】：2021-10-05 09:27:51
【问题描述】：

我正在使用 react js 开发一个项目，每当窗口大小发生变化时，我在元素中添加和删除类时遇到问题。我在一个页面中呈现了 3 个 div 元素，当屏幕小于或等于 768 时，只有一个 div 元素应该显示，其他两个元素只有在单击它们的按钮时才会显示。好吧，它工作正常，但是每次我更改浏览器的大小时，我都会在页面呈现之前收到此错误。 TypeError: Cannot read properties of null (reading 'classList') 我正在考虑使用 useState 或 useEffect 但我不知道如何在更改窗口大小时添加或删除类。需要添加或删除的类包括显示无和显示块。有人可以帮帮我吗。我只需要知道如何在窗口大小更改时添加或删除类

 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");
        
    }
});

【问题讨论】：

你应该做一些调试——要么在你的IDE中，要么放一些console.log。如果你写 let details_element = document.getElementById("details") 然后 console.log(details_element) 你可能会看到元素为空。

标签： reactjs class null use-state

【解决方案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> 
    )
}

【讨论】：

【解决方案2】：

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

例如：

const sample = () => {
 const [size, setSize] = setState(window.innerWidth)
 
 return <div className={size<= 768 ? 'classOne' : 'otherClass'}></div>

}

然后尝试使用react-resize-detector之类的库，您可以通过添加对元素的引用来获取大小。

如果您不想使用 3rd 方库，则需要检测 componentDidMount 或 useEffect 内部的大小变化。

例如：

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

【讨论】：