javascript - 无法在 React 中覆盖组件

Question

我有以下模态组件:

export default function LoginModal(props) {
    const { showLogin, hideLogin } = props
    if (!showLogin) return null
    return (
        <div class='overlay'>
            <div class='modal'>
                <article class='mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10'>
                    <div class='tc'>
                        <h1 class='f4'>Firstname Lastname</h1>
                        <hr class='mw3 bb bw1 b--black-10' />
                    </div>
                    <p class='lh-copy measure center f6 black-70'>
                        test test test test
                    </p>
                </article>
            </div>
        </div>
    )
}

我正在尝试使用存储在我的 redux 存储中的状态属性有条件地渲染它。但是，当我按如下方式放置它时:

<article class='pv6 center ph3 ph5-ns tc br2 bg-washed-green dark-green mb5'>
    PAGE CONTENT HERE           
</article>
<LoginModal />

它出现在屏幕其余内容的下方，而不是像我希望的那样位于其他所有内容之上。我正在使用以下 css 来尝试获得这种效果，但它似乎不起作用:

.overlay {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: 'rgba(0,0,0,0.3)';
    padding: 50;
    z-index: 300;
}

.modal {
    background-color: '#fff';
    border-radius: 5;
    max-width: 500;
    min-height: 300;
    margin: '0 auto';
    padding: 30;
}

我需要模态显示为屏幕中央的登录卡，背景变暗，这在许多网站上都很常见。我也宁愿不使用一个UI组件库来实现。感谢您的帮助!

Answer 1

我认为您缺少一个 position: fixed在你的.overlay样式。

此外，您可能需要考虑使用 Portals在应用程序的 DOM 层次结构之外呈现模态，即在 <div id="app"></div> 之外或 <div id="root"></div>我们常用。

为此，您的 index.html或等效文件将包含以下内容:

<div id="app"></div>
<div id="modal"></div>

然后您需要更新您的 LoginModal像这样:

export default function LoginModal(props) {

  const { showLogin, hideLogin } = props;

  if (!showLogin) return null;

  return ReactDOM.createPortal((
    <div class='overlay'>
      <div class='modal'>
        <article class='mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10'>
          <div class='tc'>
            <h1 class='f4'>Firstname Lastname</h1>

            <hr class='mw3 bb bw1 b--black-10' />
          </div>

          <p class='lh-copy measure center f6 black-70'>
            test test test test
          </p>
        </article>
      </div>
    </div> 
  ), document.getElementById('modal'));

}

请注意，如果您尝试重用此示例中的代码来创建通用 Modal组件，您一次只能显示一个，因为它们将在同一个 #modal 内呈现元素。

在Portals documentation您可以看到一个动态创建新元素的示例，这样您就可以同时拥有多个模式。