如何使用语义UI打开多个手风琴作出反应？

Question

我正在尝试使用包含多个条目的语义UI手风琴，并允许一次打开多个条目。每个条目都有一个标题部分，该标题部分包含一个带有弹出菜单的图标，以及一个包含文本区域的内容区域。

我希望能够同时打开两个手风琴，如此处exclusive={false}的文档所述，在制作手风琴元素时显然通过使用道具来支持

但是该示例似乎使用的对象数组的内容是字符串，而不是其他react / html / jsx元素（在我的情况下是语义ui图标，弹出窗口和文本区域）。那一系列对象被传递到手风琴的panel道具中。

而且我不了解语义ui反应手风琴在跟踪索引和其他内容时正常运行所需要的内容，我不确定我还需要配置什么，或者不确定是否可以使用语义ui组件原样。

我实质上是复制了此示例，并使用了活动索引和onclick处理程序，该处理程序在组件反应状态下切换了活动索引。

这是手风琴和onclick处理程序的片段，并对应用程序状态做出反应：

class FileUpload extends Component {

 // other stuff omitted 

  constructor(props) {

    super(props);

    this.state = {

      activeAccordionIndex: -1

    };

  handleAccordionClick = (e, titleProps) => {

     const { index } = titleProps;

     const { activeAccordionIndex } = this.state;

     const newIndex = activeAccordionIndex === index ? -1 : index;

     this.setState({

       activeAccordionIndex: newIndex

     })

   }

 // I'm using a small helper function to create the accordion and invoke it in 

 // the render method, just one item for brevity; the other entries are pretty 

 // much the same

getAccordionInputs() {

     const { activeAccordionIndex } = this.state;

     let accordionContent = (

      <Accordion fluid exclusive={false}>

         <Accordion.Title

           className="file-upload-ordinal-accord-title"

           active={activeAccordionIndex === 0}

           index={0}

           onClick={this.handleAccordionClick}

          >

           <Icon name='dropdown' />

           Enter Ordinal Features

           <Popup

             on="click"

             position="right center"

             header="Ordinal Features Help"

             content={

               <div className="content">

                 <p>Ordinal Features help description</p>

               </div>

             }

我不知道该如何设置以允许多个手风琴同时打开而不是字符串的内容。语义ui手风琴有可能吗？还是我需要找到替代解决方案和/或手工制作具有所需行为的零件？