Javascript 如何切换布尔状态以显示/隐藏组件/div？

我在ReactJs中有一个任务，我被它卡住了： 我有一个基于类的组件，它的状态包含Person和boolean show。任务是创建一个按钮，切换show状态，当state show为true时，Person profile将显示 以下是我开始创建状态的方式：

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>
    );
  }
}

类应用程序扩展了React.Component{
状态={
人:{
全名：“鸣人Uzumaki”，
简介：“我只是喜欢拉面”，
imgSrc:{myImage}，
职业：“第七霍卡格”
},
节目：假
};
render（）{
返回(
你好
);
}
}

然后我做了一些研究，最终得到了以下代码：

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>
      </>
    );
  }
}

类应用程序扩展了React.Component{
状态={
人:{
全名：“鸣人Uzumaki”，
简介：“我只是喜欢拉面”，
imgSrc:myImage，
职业：“第七霍卡格”
},
秀:假,，
};
handleShowPerson=（）=>{
这是我的国家({
…这个州的人，
show:！this.state.show，
});
}
render（）{
返回(
{this.state.Person.fullName}
{this.state.Person.bio}
{这个.州.人.职业}



点击这里
);
}
}

但是什么都没有发生当我点击按钮时，屏幕显示的是我的个人资料和没有发生 如果您正在切换“show”状态变量，但没有将其用于任何用途，我将不胜感激。你需要根据这一点包装你想要显示/隐藏的应用程序的哪些部分。在React中，通常通过

{someBooleanVariable&&（）}

类应用程序扩展了React.Component{
状态={
人:{
全名：“鸣人Uzumaki”，
简介：“我只是喜欢拉面”，
imgSrc:myImage，
职业：“第七霍卡格”
},
秀：真的
};
handleShowPerson=（）=>{
这是我的国家({
…这个州，
show:！this.state.show
});
};
render（）{
返回(
{this.state.show&&(
{this.state.Person.fullName}
{this.state.Person.bio}
{这个.州.人.职业}



)}
点击这里
);
}
}

---

这很有帮助，非常感谢

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 && (
          <>
            <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>
      </>
    );
  }
}