ReactJS如何更改onClick图标（SVG）？

Question

我正在使用语义UI的手风琴。我用自己的SVG替换了默认的箭头按钮。我有两个SVG，折叠模式时一个向上箭头（^），打开时一个向下箭头（∨）。单击^后，我想将其更改为∨。我该如何实现？

 <Accordion.Title active={this.state.activeIndex === idx} index={idx} onClick={this.clic}>
 <div className="fleche">
      <FlecheBasSVG // Down arrow
      onClick={<FlecheBasSVG />}/> {/* Up arrow */}
      Version {idx + 1} - {elem.etat ? t(`flot.split.etat.${elem.etat}`) : "flot.split.etat.INCONNU"}
</div>
</Accordion.Title>

Answer 1

 state = {
     arrow: true;
 }

 const handleClick = () => {
     this.setState({arrow: !this.state.arrow})
 }


 <Accordion.Title active={this.state.activeIndex === idx} index={idx} onClick={this.clic}>
 <div className="fleche">
    // assuming the svg component has something to link an image (I am using an SRC prop, that probably wont work but is an example)
      {this.state.arrow ? <FlecheBasSVG onClick={this.handleClick} src="/path/to/up/image"/> : <FlecheBasSVG onClick={<this.handleClick} src="/path/to/up/image"/>}
      Version {idx + 1} - {elem.etat ? t(`flot.split.etat.${elem.etat}`) : "flot.split.etat.INCONNU"}
</div>
</Accordion.Title>