twitter-bootstrap - react-bootstrapアコーディオンがマップで折りたたまない

Question

最終的にアコーディオンに挿入されるパネルを作成したいアイテムの配列があります。

1つのファイルには、次のものがあります。

var items = this.state.contents.map(function(content, index) {
  return <Content {...content}, key={index}/>
};

return (
  <Accordion>
    {items}
  </Accordion>
);

Content という別のファイルには、次のものがあります。

return(
  <Panel header={this.props.header} eventKey={this.props.key}>
    {this.props.body}
  </Panel>
);

同じファイルにアコーディオンとパネルがある場合、それらは機能します。しかし、それらを2つのファイルに分割した後、マップを使用してパネルを生成すると、折りたたまれていないようです。

Answer 1

これを行う最も簡単な方法は、eventKey パラメータ内で条件を作成することです。

 <Card key={item.id}> 
    <Card.Header>
      <Accordion.Toggle as={Button} variant="link" eventKey={index === 0 ? '0' : index}>
        {item.title} 
      </Accordion.Toggle>
    </Card.Header>
    <Accordion.Collapse eventKey={index === 0 ? '0' : index}>
      <Card.Body>
             CARD BODY
      </Card.Body>
    </Accordion.Collapse>
  </Card>