时间戳

首页 > 解决方案 > reactjs如何隐藏元素

reactjs - reactjs如何隐藏元素

问题描述

所以我正在开发一个应用程序，我需要隐藏 Userform 组件，直到他们单击作为登录组件一部分的注册按钮之后。这可能是一个简单的问题，但我很难回答。

这是我的 app.js

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 = {
      display: 'register',
      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:
    }
  }
}

标签： reactjs

解决方案

render 函数实际上需要一个返回值，即使它只是 null。所以我会考虑重构你的应用程序总是返回一些东西。我会在渲染功能之外有开关，并有这样的东西。


  const switchApp(display) => {
    switch(display) {
      case 'register':
        return <UserForm
            setAppState={this.setAppState}
          />
      case 'login':
        return  <Login 
            setAppState={this.setAppState}
          />
      default:
        return null;
    }
  }
   
  render() {
    const { display } = this.state;
    if(!display){
       return null;
    }
    return (
      <div className="App">
         { switchApp(display) }
      </div>
    )
  }

推荐阅读