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.

在一个文件中，我有:

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>
);

当我将 Accordion 和 Panel 放在同一个文件中时，它们就可以工作了.但是当我将它们分成两个文件后使用map生成Panel时，它似乎没有崩溃.

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 似乎抱怨手风琴的孩子不是面板，通过将面板包装在我的内容类中，我就是这样做的.

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屋！