reactjs - 在反应js中更改窗口大小时添加或删除类
问题描述
我正在使用 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");
}
});
解决方案
您可以使用 更新状态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>
)
}
推荐阅读
- swift - 指定行数后UILabel SizetoFit?
- r - 在 tidyverse 中循环分组
- c# - ASP.NET Web 应用程序在本地网络和访问数据库中停止工作
- javascript - 如何防止在单击多选时触发 Bootstrap Multiselect 下拉菜单中的 Elements?
- java - EntityManager 尝试创建现有实体
- sql - 如何计算同一张表的两个不同行中的值?
- c# - 如何从列表中删除记录
- angular - 物料表默认排序不起作用
- java - list.notify() 抛出异常
- php - 禁用 Woocommerce 产品类别存档页面上的添加到购物车按钮