Question

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

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

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

Answer 1

TL; DR 使用$(function(){ $('label').text('Copy Code').next('input[type=text]').val($('label').text('Code').next('input[type=text]').val()); });和document.body.classList.add

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

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

document.body.classList.remove

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

实际上，您不需要2个用于打开和关闭的功能，可以使用document.body.classList.toggle

const [isOpen, setIsOpen] = useState(false)
useEffect(() => {
  document.body.classList.toggle('modal-open', isMobileOpen);
},[isOpen])
    
<button onCLick={()=> setIsOpen(!isOpen)}>Toggle Modal</button>

Answer 4

与@brian提到的一样，尝试使用包含其他组件的顶级容器组件。（假设您未在应用中使用redux）

在这个顶级组件中：

添加布尔状态（例如modalOpen）以切换CSS类
添加方法（例如handleOpenModal＆amp; handleCloseModal）以修改布尔状态。
将上面创建的方法作为道具传递到<Modal />组件

Answer 5

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

使用React将类添加到HTML标记中？

5 个答案: