react-bootstrap - 将 Accordion (1.6.1 & 2.0.0-Alpha) 分解为 2 个组件 - 所有手风琴项目都打开

Question

第一次反应。第一次 React-Bootstrap，所以提前道歉。直接从文档复制手风琴，按预期工作。但我想创建一个“未知”数量的手风琴项目。另外，最终我想在 Accordion 项目中创建更多组件。这是我的尝试，只要单击任何标题，就会导致“所有”手风琴项目打开和关闭。

class AssessmentTab extends React.Component{ constructor(props) {
  super(props);} 
  render() {
  const assessments = this.props.Assessment;
  const listItems = assessments.map((as, index) =>
  <AssessmentSection key={as.TaskCategoryID} AssessmentSection={as} itemNumber={index} />
);

return (
      <Accordion defaultActiveKey="1">
        {listItems}
      </Accordion>
      );
}}

class AssessmentSection extends React.Component{ constructor(props){
  super(props);}render() {
  const as = this.props.AssessmentSection;
  const itemNumber = this.props.itemNumber;
  return (
    <Accordion.Item eventKey="{itemNumber}">
    <Accordion.Header>Accordion Item #1</Accordion.Header>
    <Accordion.Body>
        Hello! I'm another body {as.TaskCategoryID}
        Lorem ipsum dolor.....
    </Accordion.Body></Accordion.Item>);}}

我在之前的带有 Cards 的 react-bootstrap 版本中尝试了类似的方法 - 结果相同。有什么建议么？

标签： react-bootstrap