Блог

У меня есть эта задача в ReactJS, и я как бы застрял с ней: у меня есть компонент на основе класса с состоянием, содержащим Person и boolean show задача состоит в том, чтобы создать кнопку, которая переключает состояние отображения, и когда состояние show равно true, появляется профиль пользователя. вот как я начал создавать профиль пользователя.состояние :

 class App extends React.Component {
  state = {
    Person: {
      fullName : "Naruto Uzumaki",
      bio : "I just love ramen",
      imgSrc : {myImage},
      profession : "7th Hokage"
    },
    show : false
  };
  render() {
    return (
      <div className="App">
        Hello!
      </div>
    );
  }
}
 

затем я провел некоторое исследование и в итоге получил этот код:

 class App extends React.Component {
  state = {
    Person: {
      fullName : "Naruto Uzumaki",
      bio : "I just love ramen",
      imgSrc : myImage,
      profession : "7th Hokage"
    },
    show : false,
  };
  handleShowPerson = () => {
    this.setState({
      ...this.state.Person,
      show: !this.state.show,
    });
  }
  render() {
    return (
      <>
        <h1>{this.state.Person.fullName}</h1>
        <h1>{this.state.Person.bio}</h1>
        <img src={this.state.Person.imgSrc} alt="Naruto"></img>
        <h1>{this.state.Person.profession}</h1>
        <br></br>
        <button onClick={this.handleShowPerson}>click here</button>
      </>
    );
  }
}
 

Но ничего не происходит, на экране отображается мой профиль adn, когда я нажимаю на кнопку, ничего не происходит
Я буду признателен за любую помощь

Вы переключаете переменную состояния «показать», но не используете ее ни для чего. Вам нужно обернуть, какие части приложения вы хотите показать / скрыть на основе этого. В React вы обычно делаете это с помощью {someBooleanVariable amp;amp; (<SomeJSX />)}

 class App extends React.Component {
  state = {
    Person: {
      fullName: "Naruto Uzumaki",
      bio: "I just love ramen",
      imgSrc: myImage,
      profession: "7th Hokage"
    },
    show: true
  };

  handleShowPerson = () => {
    this.setState({
      ...this.state,
      show: !this.state.show
    });
  };

  render() {
    return (
      <>
        {this.state.show amp;amp; (
          <>
            <h1>{this.state.Person.fullName}</h1>
            <h1>{this.state.Person.bio}</h1>
            <img src={this.state.Person.imgSrc} alt="Naruto"></img>
            <h1>{this.state.Person.profession}</h1>
            <br></br>
          </>
        )}

        <button onClick={this.handleShowPerson}>click here</button>
      </>
    );
  }
}
 

https://codesandbox.io/s/rough-moon-tl0yx?file=/src/App.js