Question

我想基于react js中的某些标志隐藏某些组件。我有一个App组件，其中有Login和其他组件，我想隐藏其他组件，直到Login组件this.state.success为false并单击按钮时，我正在更改状态，但它不起作用，我是新来的人，

我的App类组件-

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

为了示例，我在这里使用了功能性无状态组件。您可以全部使用Class组件。

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

您甚至可以调用返回布尔值的函数来代替直接给出条件。

Answer 2

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

这样做

 <Login success={success} handleSuccess= 
 {this.handleSuccess} />

绑定此功能

如何在React JS中基于某些标志隐藏某些组件

2 个答案: