如何显示来自另一个组件的react引导模式[重复]

Question

我有一个Meteor React应用程序，我正在开发该应用程序，我想在其中以一种模式实现登录/注册功能。我不知道如何通过单击“注册”或“登录”按钮打开模式

我有以下两个组成部分：

UI/组件/main-布局/头/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/组件/模态/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>
        )
    }
}