javascript - 如何根据react js中的某些标志隐藏某些组件

Question

我想根据react js中的一些标志隐藏一些组件。我有一个应用程序组件，其中有登录和其他组件，我想隐藏其他组件，直到登录组件 this.state.success 为 false 并单击按钮我正在更改状态，但它不起作用，我是新来 react 的，

我的应用程序类组件 -

import React, { Component } from "react";
import logo from "../../logo.svg";
// import Game from "../Game/Game";
import Table from "../Table/Table";
import Form from "../Table/Form";
import Clock from "../Clock/Clock";
import "./App.css";
import Login from "../Login/Login";

class App extends Component {
  state = {
    success: false
  };

  removeCharacter = index => {
    const { characters } = this.state;

    this.setState({
      characters: characters.filter((character, i) => {
        return i !== index;
      })
    });
  };

  handleSubmit = character => {
    this.setState({ characters: [...this.state.characters, character] });
  };

  handleSuccess() {
    this.setState({ success: true });
  }

  render() {
    const { characters, success } = this.state;

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <span className="Span-inline">App</span>
          <Clock time={new Date()} />
        </header>
        <Login success={success} handleSuccess={this.handleSuccess} />
        {success && (
          <div className="container">
            <h1>React Tutorial</h1>
            <p>Add a character with a name and a job to the table.</p>
            <Table
              characterData={characters}
              removeCharacter={this.removeCharacter}
            />
            <h3>Add New character</h3>
            <Form handleSubmit={this.handleSubmit} />
          </div>
        )}

        {/* <Game /> */}
      </div>
    );
  }
}

export default App;

我的登录组件 -

import React, { Component } from "react";
import Greeting from "./Greeting";
import LogoutButton from "./LogoutButton";
import LoginButton from "./LoginButton";

class Login extends Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {
      isLoggedIn: false,
      name: "",
      success: false
    };
  }

  handleLoginClick() {
    this.setState({ isLoggedIn: true });
    this.setState({ success: true });
  }
  handleLogoutClick() {
    this.setState({ isLoggedIn: false });
    this.setState({ success: false });
  }
  onChange = e => {
    this.setState({
      name: e.target.value
    });
  };

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    const name = this.state.name;
    // const successLogin = this.state.success;

    let button;

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting
          isLoggedIn={isLoggedIn}
          name={name}
          onChange={this.onChange}
        />
        {button}
      </div>
    );
  }
}

export default Login;

请指导我做错了什么。为什么有时调试器不会在 React 组件中触发？

Answer 1

为了举例，我在这里使用了功能无状态组件。您可以随意使用类组件。

const conditionalComponent = (props) => {
    let condition = true;
    return (
    {condition && <div><h1>Hello world</h1></div>}
    }

您甚至可以调用返回 bool 值的函数，而不是直接给出条件。