React + Mobx，创造＆＃34;全球＆＃34;组件并通过深层嵌套的子项访问它们

Question

免责声明：这是我的第一个reactjs应用程序，所以请随时告诉我应该阅读哪个部分。

我使用react-modal创建一个简单的模态。有2个非常相似的模态，所以我创建了一个AuthModal，它包含了模态的内容，一个Login模式和一个Register模式。我希望能够从3个或4个不同的地方（可能更多）触发模态打开。但是，我被卡住了。我不确定如何将模式变成某种全球性的模式。组件，以及如何从不同的按钮打开它。

class Login extends React.Component {

    render() {
        return <div>
            <NavItem text="Login" click={() => this.refs.modal.openModal()} />
            <AuthModal ref="modal" contentLabel="Login Modal">
                <h1>Login</h1>
                <div className="SocialLogin">
                    <FacebookLogin
                        appId={config.FB.APP_ID}
                        autoLoad={true}
                        fields={config.FB.SCOPES}
                        textButton=""
                        callback={responseFacebook}
                        cssClass="SocialButtonWrapper"
                        icon={<SocialButtonContent
                            iconName="facebook-official"
                            title="Log In Using Facebook"
                            size="2x"
                        />} />
                    <GoogleLogin
                        clientId={config.GOOGLE.CLIENT_ID}
                        onSuccess={responseGoogle}
                        onFailure={responseGoogle}
                        className="SocialButtonWrapper"
                        style={
                            {
                                display: "inline-block"
                            }
                        }
                    >
                        <SocialButtonContent
                            iconName="google"
                            title="Log In Using Google"
                            size="2x"
                        />
                    </GoogleLogin>

                </div>
                <Separator />
                <div className="PasswordLogin">

                    <AuthInput
                        name="email"
                        type="text"
                        placeholder="Email Address"
                        img={email}
                    />

                    <AuthInput
                        name="password"
                        type="password"
                        placeholder="Password"
                        img={lock}
                    />

                    <ForgotPasswordLink />

                    <AuthActionButton
                        text="Login"
                    />
                    <span className="AuthLink">Don't have an account?</span>

                    <div className="AuthLinkHighlight Center AnimateTransition-200-Ease">
                        <a href="#">
                            Sign Up
                        </a>
                    </div>



                </div>

            </AuthModal>
        </div>
    }
}

正如您所见，this.refs.modal.openModal（）} /＆gt;是打开模态的原因。这现在限制我无法从不同的地方打开模态。因为我必须创建一个全新的组件实例。有没有办法让这成为一个全球性的＆＃34;使用Mobx的组件还是有人能指出我正确的主题来阅读？