ReactJS中如何隐藏元素：点击Login组件注册按钮后才显示UserForm

解决方案 #

第一步：调整App组件初始状态 #

你当前代码默认display值为register，所以启动后直接渲染注册表单，把初始值改为login即可默认显示登录组件：

import React from 'react';
import './App.css';
import UserForm from './components/UserForm';
import Login from './components/Login.js';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 把初始值从register改成login，默认显示登录组件
      display: 'login',
      acc: null
    }
    this.setAppState = this.setAppState.bind(this);
  }

  setAppState(event) { this.setState(event) }

  render() {
    const { display } = this.state;

    switch(display) {
      case 'register':
        return <div className="App">
          <UserForm
            setAppState={this.setAppState}
          />
        </div>
      case 'login':
        return <div className="App">
          <Login 
            setAppState={this.setAppState}
          />
        </div>
      default:
        return null
    }
  }
}

第二步：给Login组件的注册按钮绑定切换事件 #

你已经给Login组件传递了setAppState属性，直接在Login组件内给注册按钮绑定点击事件即可：

// Login组件示例代码
import React from 'react'

export default class Login extends React.Component {
  render() {
    return <div>
      {/* 原有登录相关代码 */}
      <button onClick={() => {
        // 调用父组件传递的setAppState修改display状态
        this.props.setAppState({display: 'register'})
      }}>注册</button>
    </div>
  }
}

可选：注册页加返回登录的入口 #

如果需要从注册表单切回登录页，在UserForm组件内添加触发逻辑即可：

// UserForm组件内添加返回按钮示例
<button onClick={() => {
  this.props.setAppState({display: 'login'})
}}>返回登录</button>

内容的提问来源于stack exchange，提问作者Kevin