在反应中使用 useState 更改 css 时遇到问题

Question

我正在尝试在 React 中构建模态。打开时，背景或主体颜色必须更改为较暗的颜色，模态框应打开，关闭时，一切都必须恢复正常。我试图通过这种方法实现这一点：

const [modalState, setModalState] = useState(false);
const [modalBg, setModalbg] = useState(false);

function handleClick() {
    setModalState(true);
    setModalbg(true);
    
}
return (
  {
      !modalState ?
       null
       : <Modal modalState = {setModalState}/>
  }
  {
      !modalBg ?
       document.body.style.backgoundColor = "ffff"
      : document.body.style.backgoundColor = 'rgba(39, 38, 38, 0.616)'
  }
  <button onClick= {handleClick}>Open</button>
  
)

问题是，它没有改变正文的颜色，而是像“#fff”或 'red' 一样将文本呈现到页面。我不知道为什么会这样，有人可以帮忙吗？

谢谢！

Answer 1

您不应在 return 函数中设置正文的背景颜色。这意味着 return JSX。

尝试使用 useEffect 钩子，例如：

useEffect(() => {
  if (modalBg) {
    document.body.style.backgoundColor = "rgba(39, 38, 38, 0.616)";
  } else {
    document.body.style.backgoundColor = "ffff";
  }
}, [modalBg]);

Answer 2

您的方式并不是真正的处理模态的“React”方式。首先，我怎么强调创建模式时门户的使用都不为过。请查看 this 以真正了解门户是什么以及它们如何帮助您。
继续，您可以创建一个模态组件，如下所示，并根据需要使用状态触发该组件。只需确保将该状态的 setter 作为道具传递给组件，在我的例子中是 setShowModal。
您的模态背景包含在 div my-modal-container 中，您可以根据需要进行更改。

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const MyModal = ({setShowModal}) => {

    const handleClose = () => {
        setShowModal(false)
    };

    return ReactDOM.createPortal(
        <div className='my-modal-container'>
            <div class='my-modal-body'>
                //Place all you modal body here
            </div>
        </div>,
        document.getElementById('portal')
    );
};
export default MyModal;

如果您选择使用上述门户，请确保在 <div id="root"></div>.

正下方的 index.html 文件中添加 <div id="portal"></div>

在反应中使用 useState 更改 css 时遇到问题

Having problem in changing css using useState in react

javascript

node.js

reactjs

react-state