如何显示来自另一个组件的 react-bootstrap 模态

Question

我有一个正在开发的 Meteor+React 应用程序，我想在模式中实现 login/registration 功能。我不确定如何通过单击我的注册或登录按钮打开模式

我有以下两个组成部分：

ui/components/main-layout/header/LoggedOutNav.jsx

import React, { Component } from 'react'

export default class LoggedOutNav extends Component {
    render() {
        return(
            <ul className="nav navbar-nav">
                <li>
                    <a href="#">
                        <i className="fa fa-sign-in" aria-hidden="true"></i>
                        &nbsp;
                        Log In
                    </a>
                </li>
                <li>
                    <a href="#loginRegistration">
                        <i className="fa fa-user-plus" aria-hidden="true"></i>
                        &nbsp;
                        Sign Up
                    </a>
                </li>
            </ul>
        )
    }
}

ui/components/modals/LoginRegistration.jsx

import React, { Component } from 'react'
import { Modal } from 'react-bootstrap'

export default class LoginRegistration extends Component {
    getInitialState() {
        return { showModal: false }
    }

    close() {
        this.setState({ showModal: false })
    }

    open() {
        this.setState({showModal: true})
    }

    render() {
        return (
            <Modal show={this.state.showModal} onHide={this.close}>
                {/* Irrelevant modal code here */}
            </Modal>
        )
    }
}

我怎样才能从我的其他组件打开模式？

Answer 1

import React, { Component } from 'react'
import { Modal } from 'react-bootstrap'

export default class LoggedOutNav extends Component {
    constructor(){
        this.state = {
            showModal: false,
            activeModal: ''
        }

        this.modalDisplay = this.modalDisplay.bind(this);
    }
    modalDisplay(e){
        this.setState({
            showModal: !this.state.showModal,
            activeModal: e.target.getAttribute('data-tab')
        });
    }
    render() {
        return(
            <div>
                <ul className="nav navbar-nav">
                    <li 
                        onClick={ this.showModal }
                        data-tab = 'login'>
                        <a href="#">
                            <i className="fa fa-sign-in" aria-hidden="true"></i>
                            &nbsp;
                            Log In
                        </a>
                    </li>
                    <li
                        onClick={ this.showModal }
                        data-tab = 'signup'>
                        <a href="#loginRegistration">
                            <i className="fa fa-user-plus" aria-hidden="true"></i>
                            &nbsp;
                            Sign Up
                        </a>
                    </li>
                </ul>
                <div>
                    {
                        this.state.showModal
                        &&
                        <Modal modalType={ this.state.activeModal } onHide={this.modalDisplay} data-tab= ""/>
                    }
                </div>
            </div>
        )
    }
}

您可以将模态类型传递给 Modal 组件，或者使用三元运算符来渲染

{
  this.state.activeModal === 'login' ? 
    <Login /> : 
    <SignUp />
}

如何显示来自另一个组件的 react-bootstrap 模态

How to display a react-bootstrap modal from another component

javascript

bootstrap-modal

reactjs

react-bootstrap