react-bootstrap手风琴未与地图合拢 [英] react-bootstrap Accordion not collapsing with map

问题描述

我有一系列要创建面板的项目，最终将这些面板插入到手风琴中。

I have an array of items I would like to create Panels out of which would eventually be inserted into the Accordion.

在一个文件中，我拥有：

In one file, I have:

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

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

在另一个名为Content的文件中，我有：

In another file called Content I have:

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

当我将手风琴和面板放在同一个文件中时，它们可以工作，但是当我将地图分为两个文件后使用map生成面板时，它似乎没有崩溃。

When I have the Accordion and Panel in the same file, they work. But when I generate the Panel using map after splitting them into two files, it doesn't seem to collapse.

推荐答案

react-bootstrap似乎抱怨手风琴的孩子不是面板，而是通过包装窗格来抱怨我在Content类中只是这样做。

react-bootstrap seems to complain if the children of an Accordion are not Panels, and by wrapping Panel inside of my Content class I was doing just that.

要解决此问题，我必须摆脱React的惯例。我没有创建类Content，而是创建了另一个js文件而不是react.js文件。通过将该文件视为普通的js文件，我可以在该文件内部调用一个函数，该函数映射每个'this.state.contents'并返回一个Panel对象。

To solve this problem I had to step away from React's convention. Rather than creating a class Content, I created another js file rather than a react.js file. By treating this file like a normal js file, I was able to call on a function inside of this file which maps over each 'this.state.contents' and return a Panel object.

整个文件将返回一个Panel类数组。

This whole file will return an array of Panel class.

这篇关于react-bootstrap手风琴未与地图合拢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！