在HTML中添加一个类 tag with React?

Question

我在我的React项目中创建了一个模态，它需要在模态打开时将类添加到主体，并在关闭时删除。

我可以通过运行一些添加/删除类的vanilla javascript来实现旧的jQuery方式，但这并不像普通的React哲学那样。

我应该在我的顶级组件上设置setState来说天气模式是打开还是关闭？即使我这样做了，因为它渲染到页面上的div中，它仍然是编辑body元素的副作用，所以这个额外的布线有什么好处吗？

Answer 1

TL; DR使用document.body.classList.add和document.body.classList.remove

我将有两个函数切换一个状态来显示/隐藏外部组件中的模态。

在这些函数中，我将使用document.body.classList.add和document.body.classList.remove方法来操作依赖于模态状态的body类，如下所示：

openModal = (event) => {
  document.body.classList.add('modal-open');
  this.setState({ showModal: true });
}
hideModal = (event) => {
  document.body.classList.remove('modal-open');
  this.setState({ showModal: false });
}

Answer 2

使用新的React（16.8），可以使用hooks解决：

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

然后，在组件中

export const Sidebar = ({position = 'left', children}) => {
    useBodyClass(`page--sidebar-${position}`);
    return (
        <aside className="...">
            {children}
        </aside>
    );
};

Answer 3

就像@brian提到的那样，尝试使用包含其他组件的顶级容器组件。 （假设您没有在应用中使用redux）

在这个顶级组件中：

1. 添加布尔状态（例如，modalOpen）以切换CSS类
2. 添加方法（例如handleOpenModal和handleCloseModal）来修改布尔状态。
3. 将上面创建的方法作为props传递到<Modal />组件中

Answer 4

ReactJS有一个官方的React Modal组件，我只想用它：https://github.com/reactjs/react-modal