React.js - 当模态框显示时禁用背景滚动

Question

当弹出窗口打开时，我想禁用背景body滚动。我使用React portal创建了Modal。我想到的唯一方法是在Modal打开时给body设置overflow-y属性，但不确定如何执行。

我的Modal.js代码如下：

export default function Modal({open, onClose, image, title, description}){
  if (!open) return null

  return ReactDom.createPortal(
    <>
    <div id="overlay"  />
    <div id="modal" >
      <button title={title} onClick={onClose}>close</button>
      <h3>{title}</h3>
      <img src={image} className="modal-img"/>
      {description}
    </div>
    </>,
    document.getElementById('portal')
  )
}

我正在“渲染”该模型的组件

const ProjectCardUI = (props)=>{
  const[isOpen, setIsOpen] = useState(false)

  function openModal() {
    setIsOpen(true)
      // can I set the styling for '.body' or 'html' here?
  }

  return(
    
<div className="card text-center container-fluid d-flex">
  <a className="modal-click" onClick ={openModal}>this is a link</a>
  <Modal 
    open={isOpen} 
    onClose={() => setIsOpen(false)}
    title={props.cardName} 
    image={props.imgsrc}
    description={props.cardDescription}>
  </Modal>
</div>
  )
};

任何帮助都将是极好的。

- TheMayerof

Answer 1

您可以通过 document 对象直接操作网页主体的样式。

例如：

import React from "react";
import ReactDOM from "react-dom";

export default function Test() {
  const setHidden = () => {
    console.log(document.body.style.overflow);
    if (document.body.style.overflow !== "hidden") {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "scroll";
    }
  };

  return (
    <div>     
      <button onClick={setHidden}>Click me! </button>
      <h1>1</h1>
      <h1>2</h1>
      <h1>3</h1>
      <h1>4</h1>
      <h1>5</h1>
      <h1>6</h1>
      <h1>7</h1>
      <h1>8</h1>
      <h1>9</h1>
      <h1>10</h1>
      <h1>11</h1>
      <h1>12</h1>
      <h1>13</h1>
      <h1>14</h1>
      <h1>15</h1>
      <h1>16</h1>
    </div>
  );
}
ReactDOM.render(<Test />, document.getElementById("container"));

- bwiz

Answer 2

也许是这样的：

可能是这样的:

const ProjectCardUI = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  function openModal() {
    setIsOpen(true);
    // can I set the styling for '.body' or 'html' here?
  }

  useEffect(() => {
    const body = document.querySelector('body');
    body.style.overflow = isOpen ? 'hidden' : 'auto';
  }, [isOpen])

  return (
    <div className="card text-center container-fluid d-flex">
      <a className="modal-click" onClick={openModal}>
        this is a link
      </a>
      <Modal
        open={isOpen}
        onClose={() => setIsOpen(false)}
        title={props.cardName}
        image={props.imgsrc}
        description={props.cardDescription}
      ></Modal>
    </div>
  );
};

- Iosif