Reactjs 通过重新呈现模式/组件来交换登录/注册表单？

现在，我有一个模式，根据是否

this.props.modal==='login

'

或

==注册

我想做的是允许某人单击底部的绿色按钮，并将表单切换到另一个表单

我是一个react新手，我找不到任何可以帮助我重新呈现会话表单以从登录表单切换到注册表单或从注册表单切换到登录表单的解释

实现这一目标的最佳方式是什么

下面是我的表单现在的样子：

下面是我的代码的样子：

import React from 'react';
import { closeModal } from '../../actions/modal_actions';
import { connect } from 'react-redux';
import LoginFormContainer from '../session_form/login_form_container';
import SignupFormContainer from '../session_form/signup_form_container';

import { render } from 'react-dom';

class Modal extends React.Component{
    constructor(props){
        super(props)
        // this.state = { modal: this.props.modal}
        this.state = this.props.modal
        this.comp = this.comp.bind(this);
        // this.stateSwitch = this.stateSwitch.bind(this);

    }

    comp(){
        let component;
        switch (this.props.modal) {
            case 'login':
                return component = <LoginFormContainer />;
                break;
            case 'signup':
                return component = <SignupFormContainer />;
                break;
            default:
                return null;
        }
    }

    render(){
        if(!this.props.modal) return null;
        let component = this.comp();

        return(
            <div className="modal-background">
            <div className="modal-child" onClick={e => e.stopPropagation()}>
                <div className='modal-tab'>
                    <div onClick={this.props.closeModal} className='close-tab'>close</div>
                </div>
                    {component} // this contains my session form (log in or signup)
                <div className="switch-tab">
                        <p onClick={'thing that updates form'}>Or Sign Up (or log in depending</p>
                </div>
            </div>
        </div>
    )}

}

const mSTP = state => {
    return {
        modal: state.ui.modal
    };
};

const mDTP = dispatch => {
    return {
        closeModal: () => dispatch(closeModal()),
    };
};

export default connect(mSTP, mDTP)(Modal);

从“React”导入React；
从“../../actions/modal_actions”导入{closeModal}；
从'react redux'导入{connect}；
从“../session_form/login_form_container”导入LoginFormContainer；
从“../session_form/signup_form_container”导入SignupFormContainer；
从'react dom'导入{render}；
类Modal扩展了React.Component{
建造师（道具）{
超级（道具）
//this.state={modal:this.props.modal}
this.state=this.props.modal
this.comp=this.comp.bind（this）；
//this.stateSwitch=this.stateSwitch.bind（this）；
}
comp（）{
let组件；
开关（this.props.modal）{
案例“登录”：
返回分量=；
打破
“注册”案例：
返回分量=；
打破
违约：
返回null；
}
}
render（）{
如果（！this.props.modal）返回null；
让component=this.comp（）；
返回(
e、 stopPropagation（）}>
关闭
{component}//这包含我的会话表单（登录或注册）
或注册（或登录，具体取决于
)}
}
const mSTP=state=>{
返回{
模态：state.ui.modal
};
};
const mDTP=dispatch=>{
返回{
closeModal:（）=>分派（closeModal（）），
};
};
导出默认连接（mSTP、mDTP）（模态）；

因此，有几种方法可以做到这一点。您可以使用一个父组件，有条件地呈现

注册

或

登录

（您当前拥有的），或者让两个单独的组件成为没有父级的不同页面（我个人更喜欢这样）

但是，对于家长的情况，我们可以利用React的

状态

功能，当状态发生更改时会出现重新渲染。对于状态，您可以使用与显示登录组件（如果

登录

）或注册组件（如果

注册

）相同的功能。然后，您只需在渲染，然后渲染适当的组件，如下所示：

this.state = {
     modal: this.props.modal // Sets the default value of the state
}

然后在渲染中：

render() {
  if (!this.props.modal) return null; // Not sure if you still need this based on limited context
  return (
    <div className="modal-background">
      <div className="modal-child" onClick={e => e.stopPropagation()}>
        <div className='modal-tab'>
          <div onClick={this.props.closeModal} className='close-tab'>close</div>
        </div>
        {this.state.modal === "login" ? (<LoginFormContainer />) : (<SignupFormContainer />)}
        <div className="switch-tab">
          {this.state.modal === "login" ?
            (<p onClick={() => { this.setState({ modal: "signup" }) }> Not a user ? Sign up Here</p>) :
            (<p onClick={() => { this.setState({ modal: "login" }) }> Already a user ? Login Here</p>)
        </div>
      </div>
    </div >
  )
}

render（）{
if（！this.props.modal）返回null；//不确定基于有限的上下文是否仍然需要该值
返回(
e、 stopPropagation（）}>
关闭
{this.state.modal==“登录”？（）：（）}
{this.state.modal==“登录”？
（
{this.setState（{modal:“signup”}>）不是用户？在这里注册
）：
（
{this.setState（{modal:“login”}}>已经是用户了？在这里登录
）
)
}

在这种情况下，我们有一个

状态

，它会根据用户想要查看的内容进行更新。如果他单击

切换选项卡中的按钮

，则会触发状态更改，重新加载此父组件，然后重新加载新的子组件（无论它是更改为登录还是注册）

---

希望这有帮助：D

Dang，看起来不错。我必须尝试一下。我最终解决了我的问题，将注册和登录操作mDTP都添加到登录和注册组件中，然后在mSTP中，我添加了一个switchForm:“另一件事”，这样我就可以在会话表单中创建一个函数来交换formType和switchForm。这基本上改变了表单的功能。不过，您的解决方案看起来更干净。我在重构时会尝试一下！谢谢！