Javascript 如何仅通过单击一个部分来显示React页面中的部分

我正在尝试创建一个react应用程序，该应用程序在页面上有3个水平部分，但当您加载该应用程序时，如果单击其中一个加载部分中的对象，则仅显示一个部分，其他部分将被加载。希望这张图片能帮助解释这一点。。 我计划使用的代码如下所示

.....

section1(){
return(
    ..section1 stuff
)} 
section2(){
return(
    ..section2 stuff
)} 
section3(){
return(
    ..section3 stuff
)}     
render() {
    return (
        <div>
            <div>
                this.section1
            </div>
            <div>
                this.section2
            </div>
            <div>
                this.section3
            </div>                        
        </div>
    )
}

。。。。。
第1节（）{
返回(
…第一部分内容
)} 
第2节（）{
返回(
…第二部分内容
)} 
第3节（）{
返回(
…第三部分内容
)}     
render（）{
返回(
这是第1节
这是第2节
这是第3节
)
}

有状态组件->您可以简单地管理一个状态，无论节是打开的还是关闭的（布尔值）

OnClick->单击节时，将其状态更改为打开（或根据您的首选项切换）

有条件地渲染->现在您有了描述前面的部分是打开的还是关闭的状态，您只需要有条件地渲染这些部分。比如说

{ section1State && <Section2 /> }
{ section1State && section2State && <Section3 /> }

{section1State&&}
{section1State&§ion2State&}

您可以尝试以下方法：

constructor(){
  super();
  this.state = { sectionOneClicked: false } 
}

section1(){
return(
    ..section1 stuff
)} 

section2(){
return(
    ..section2 stuff
)} 

section3(){
return(
    ..section3 stuff
)}

handleClick(){
  this.setState({ sectionOneClicked: true });
}

render() {
    return (
        <div>
            <div onClick={() => this.handleClick()}>
                this.section1
            </div>
            {sectionOneClicked && (
              <div>
                { this.section2 }
              </div>
            )}
            {sectionOneClicked && (
              <div>
                { this.section3 }
              </div>
            )}                     
        </div>
    )
}

constructor（）{
超级（）；
this.state={sectionOneClicked:false}
}
第1节（）{
返回(
…第一部分内容
)} 
第2节（）{
返回(
…第二部分内容
)} 
第3节（）{
返回(
…第三部分内容
)}
handleClick（）{
this.setState（{sectionOneClicked:true}）；
}
render（）{
返回(
this.handleClick（）}>
这是第1节
{sectionOneClicked&&(
{this.section2}
)}
{sectionOneClicked&&(
{this.section3}
)}                     
)
}

---

因此，您可以处理单击使用状态，当单击第1节时，然后设置该状态，当该状态为真时，显示第2节和第3节。如果您想在某些情况下隐藏第2节和第3节，则可以再次将状态设置为false。同时将

onClick

移动到您将在第1节中提供的链接。

您可以接受帮助您的答案：。