Reactjs 如何修复react中的折叠按钮？

我想定义一个加号按钮，当你们点击它展开你们的内容，加号被转换成减号。 您能帮助我修复以下类中的折叠按钮吗：

import React from "react";


class FaqButton extends React.Component {
  constructor() {
    super();
    this.state = {
      button: <span>&#43;</span>,
      flag: 0,
      classN: "button-plus",
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    if (this.state.flag === 0) {
      this.setState({
        button: <span>&#8211;</span>,
        flag: 1,
        classN: "selected",
      });
    } else {
      this.setState({
        button: <span>&#43;</span>,
        flag: 0,
        classN: "button-plus",
      });
    }
  }
  render() {
    return (
      <div>
        <button className={this.state.classN} onClick={this.handleClick}>
          {this.state.button}
        </button>

        
      </div>
    );
  }
}

export default FaqButton;

从“React”导入React；
类FaqButton扩展React.Component{
构造函数（）{
超级（）；
此.state={
按钮：+；，
国旗:0,，
classN:“按钮+”，
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
if（this.state.flag==0）{
这是我的国家({
按钮–；，
国旗:1,，
classN：“已选定”，
});
}否则{
这是我的国家({
按钮：+；，
国旗:0,，
classN:“按钮+”，
});
}
}
render（）{
返回(
{this.state.button}
);
}
}
导出默认按钮；

仅将

标志

保持在状态，基于此，您可以更改模板。 您还可以根据

状态中的
标志
属性显示内容，如下所示

import React from "react";
import "./styles.css";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      flag: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      flag: this.state.flag === 0 ? 1 : 0
    });
  }
  render() {
    return (
      <div>
        <button
          className={this.state.flag === 1 ? "selected" : "button-plus"}
          onClick={this.handleClick}
        >
          {this.state.flag === 1 ? <span>&#8211;</span> : <span>&#43;</span>}
        </button>
        {this.state.flag === 1 && (
          <div style={{ border: "2px solid green" }}>
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book. It has survived not
            only five centuries, but also the leap into electronic typesetting,
            remaining essentially unchanged. It was popularised in the 1960s
            with the release of Letraset sheets containing Lorem Ipsum passages,
            and more recently with desktop publishing software like Aldus
            PageMaker including versions of Lorem Ipsum.
          </div>
        )}
      </div>
    );
  }
}

从“React”导入React；
导入“/styles.css”；
导出默认类App扩展React.Component{
构造函数（）{
超级（）；
此.state={
旗帜：0
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
这是我的国家({
flag:this.state.flag==0？1:0
});
}
render（）{
返回(
{this.state.flag==1？–；：+；}
{this.state.flag==1&&(
Lorem Ipsum只是印刷和排版的虚拟文本
Lorem Ipsum已成为行业标准的虚拟文本
从16世纪开始，一个不知名的印刷工在厨房里打字
并把它拼凑成一本样本书。它没有幸存下来
只有五个世纪，而且是电子排版的飞跃，
基本上保持不变。它在20世纪60年代开始流行
随着包含Lorem Ipsum通道的Letraset表的发布，
最近使用的是像Aldus这样的桌面发布软件
PageMaker包括Lorem Ipsum的版本。
)}
);
}
}

演示-
一点建议，您还可以使用该标志切换按钮和类