0

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

我正在使用 react-modal 创建一个简单的模态。有 2 个非常相似的模态，所以我创建了一个 AuthModal，它包含了两个模态、一个登录模态和一个注册模态的内容。我希望能够从 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()} /> 是打开模式的内容。现在这限制了我能够从不同的地方打开模式。，因为我必须创建一个全新的组件实例。有没有办法使用 Mobx 将它变成一个“全局”组件，或者有人可以指出我要阅读的正确主题吗？

4

0 回答 0