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存储中的state属性有条件地渲染的

。但是，当我将其放置如下时：

<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

我认为您缺少<form action="{{ route('accounts.update', $user->id) }}" method="post"> @csrf @method('PUT') <div class="form-group row"> <label for="balance" class="col-md-4 col-form-label text-md-right">{{ __('Enter Client\'s Balance :') }}</label> <div class="col-md-6"> <input id="balance" type="text" class="form-control @error('balance') is-invalid @enderror" name="balance" value="" autocomplete="balance" autofocus> </div> </div> <div class="form-group row"> <label for="amount" class="col-md-4 col-form-label text-md-right">{{ __('Enter Client\'s Amount:') }}</label> <div class="col-md-6"> <input id="amount" type="text" class="form-control @error('amt') is-invalid @enderror" name="amt" value=" " required autocomplete="amt" autofocus> </div> </div>  <div class="card-footer text-center"> <button type="submit" class="btn btn-primary">Update Account</button> </div> </form>风格的position: fixed。

此外，您可能要考虑使用Portals在您的应用程序的DOM层次结构之外（即，在我们通常使用的.overlay或<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')); }组件，则一次只能显示一个组件，因为它们将在同一{{1}内呈现}元素。

在Portals documentation中，您可以看到一个示例，该示例动态创建一个新元素，以便您可以同时具有多个模态。

无法在React中覆盖组件

1 个答案: