使用 React 在 HTML <body> 标签中添加一个类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47706903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a class to the HTML <body> tag with React?
提问by Evanss
Im making a modal in my React project that requires a class to be added to the body when the modal is open and removed when it is closed.
我在我的 React 项目中制作了一个模态，当模态打开时需要将一个类添加到主体中，并在它关闭时移除。
I could do this the old jQuery way by running some vanilla javascript which adds / removes a class, however this doesnt feel like the normal React philosophy.
我可以通过运行一些添加/删除类的 vanilla javascript 来使用旧的 jQuery 方式来做到这一点，但这感觉不像是正常的 React 哲学。
Should I instead setState on my top level component to say weather the modal is open or closed? Even if I did this, as its rendered into the div on the page its still a side-effect to edit the body element so is there any benefit for this extra wiring?
我应该在我的顶级组件上设置状态来说明模式是打开还是关闭的天气？即使我这样做了，因为它被渲染到页面上的 div 中，它仍然是编辑 body 元素的副作用，所以这种额外的布线有什么好处吗？
回答by Sam Logan
TL;DRuse document.body.classList.addand document.body.classList.remove
TL;DR使用document.body.classList.add和document.body.classList.remove
I would have two functions that toggle a piece of state to show/hide the modal within your outer component.
我将有两个函数来切换状态以显示/隐藏外部组件中的模态。
Inside these functions I would use the document.body.classList.addand document.body.classList.removemethods to manipulate the body class dependant on the modal's state like below:
在这些函数中，我将使用document.body.classList.add和document.body.classList.remove方法来操作依赖于模态状态的主体类，如下所示：
openModal = (event) => {
document.body.classList.add('modal-open');
this.setState({ showModal: true });
}
hideModal = (event) => {
document.body.classList.remove('modal-open');
this.setState({ showModal: false });
}
回答by Lukas Kral
With the new React (16.8) this can be solved with hooks:
使用新的 React (16.8) 这可以通过钩子解决：
import {useEffect} from 'react';
const addBodyClass = className => document.body.classList.add(className);
const removeBodyClass = className => document.body.classList.remove(className);
export default function useBodyClass(className) {
useEffect(
() => {
// Set up
className instanceof Array ? className.map(addBodyClass) : addBodyClass(className);
// Clean up
return () => {
className instanceof Array
? className.map(removeBodyClass)
: removeBodyClass(className);
};
},
[className]
);
}
then, in the component
然后，在组件中
export const Sidebar = ({position = 'left', children}) => {
useBodyClass(`page--sidebar-${position}`);
return (
<aside className="...">
{children}
</aside>
);
};
回答by JustinToh
Like what @brian mentioned, try having a top-level container component that wraps around your other components. (assuming you're not using redux in your app)
就像@brian 提到的那样，尝试使用一个顶级容器组件来包裹您的其他组件。（假设你没有在你的应用中使用 redux）
In this top-level component:
在这个顶级组件中：
- Add a boolean state (eg.
modalOpen) to toggle the CSS class - Add methods (eg.
handleOpenModal&handleCloseModal) to modify the boolean state. - Pass the methods created above as props into your
<Modal />component
- 添加一个布尔状态（例如
modalOpen）来切换 CSS 类 - 添加方法（例如
handleOpenModal&handleCloseModal）来修改布尔状态。 - 将上面创建的方法作为道具传递到您的
<Modal />组件中
回答by swyx
ReactJS has an official React Modal component, I would just use that: https://github.com/reactjs/react-modal
ReactJS 有一个官方的 React Modal 组件，我只会使用它：https: //github.com/reactjs/react-modal
