反应引导手风琴动态数据折叠不起作用

Question

在反应引导中，我在这里使用手风琴硬编码数据工作得更好，如果我实现动态数据不起作用，（例如）第一个面板打开，如果我点击第二个面板，那么第一个面板没有关闭，并且 ****@ 987654321@如果面板打开需要改变瓷砖颜色****

class CollapseContentComponent extends React.Component {
 render() {
   return (
<div className="collapsecontent-component">
<Accordion>
<Panel header={this.props.collapseTitle} eventKey={this.props.collapsemainKey}>
<div dangerouslySetInnerHTML={{__html: this.props.collapseBody }}></div>
</Panel>
</Accordion>
</div>
   );
 }
}

Answer 1

我建议你使用Controlled PanelGroups https://react-bootstrap.github.io/components/panel/#panels-controlled，这样你就不需要管理其他人的打开和关闭了。

      <PanelGroup
        accordion
        id="accordion-controlled-example"
        activeKey={this.state.activeKey}
        onSelect={this.handleSelect}
      >
        <Panel eventKey="1">
          <Panel.Heading>
            <Panel.Title toggle>Panel heading 1</Panel.Title>
          </Panel.Heading>
          <Panel.Body collapsible>Panel content 1</Panel.Body>
        </Panel>
        <Panel eventKey="2">
          <Panel.Heading>
            <Panel.Title toggle>Panel heading 2</Panel.Title>
          </Panel.Heading>
          <Panel.Body collapsible>Panel content 2</Panel.Body>
        </Panel>
      </PanelGroup>