在 React 中为 Body 元素添加一个类
在 React 中为 body 元素添加一个类:
- 在
useEffect
或事件处理程序中以 document.body 的形式访问 body 元素。 - 使用
classList.add()
方法将类添加到 body 标记。 - 例如,
document.body.classList.add('my-class')
。
import {useEffect} from 'react';
import './App.css';
export default function App() {
useEffect(() => {
// ? add class to body element
document.body.classList.add('bg-salmon');
// ?️ 向body标签添加多个类
document.body.classList.add(
'bg-salmon',
'my-class-1',
'my-class-2',
'my-class-3',
);
// ?️ 从 body 元素中删除类
document.body.classList.remove('my-class-3');
// ?️ 检查body元素是否包含一个类
if (document.body.classList.contains('bg-salmon')) {
console.log('body tag contains class');
}
}, []);
return (
<div>
<h2>Hello world</h2>
</div>
);
}
这是示例的css。
.bg-salmon {
background-color: salmon;
color: white;
}
我们使用 classList.add()
方法向 body 元素添加一个类。
我们可以访问文档对象上的 body 元素。
如果该类已经存在于
body
元素上,则不会被添加两次。
我们将一个空的依赖数组传递给 useEffect
钩子,因为我们只想将类添加到 body 元素一次 – 当组件挂载时。
如果我们需要在组件卸载时删除类,请从 useEffect
钩子返回一个清理函数。
useEffect(() => {
// ? 将类添加到 body 元素
document.body.classList.add('bg-salmon');
return () => {
// ?️ 当组件卸载时从 body 元素中删除类
document.body.classList.remove('my-class-3');
}
}, []);
我们可以根据需要将任意数量的类传递给 classList.add()
方法。
document.body.classList.add(
'bg-salmon',
'my-class-1',
'my-class-2',
'my-class-3',
);
如果我们需要从 body 标记中删除一个或多个类,请使用 classList.remove()
方法。
document.body.classList.remove(
'my-class-1',
'my-class-2',
)
我们还可以在事件发生时向 body 元素添加一个类,例如 单击一个按钮。
import './App.css';
export default function App() {
const handleClick = () => {
// ?️ 将类添加到 body 元素
document.body.classList.add('bg-salmon');
// ?️ 在 body 元素上切换类
// document.body.classList.toggle('bg-salmon');
};
return (
<div>
<button onClick={handleClick}>Click</button>
</div>
);
}
我们在按钮元素上设置了 onClick
属性,因此每次单击它时,都会调用 handleClick
函数。
如果我们需要在事件发生时切换 body 元素上的类,请使用 classList.toggle
方法。
import './App.css';
export default function App() {
const handleClick = () => {
// ?️ 在 body 元素上切换类
document.body.classList.toggle('bg-salmon');
};
return (
<div>
<button onClick={handleClick}>Click</button>
</div>
);
}
如果类存在,classList.toggle
方法会从元素中删除现有类。 否则,它将类添加到元素。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。