问题描述
我有一系列我想创建面板的项目,这些面板最终会被插入到手风琴中.
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手风琴不会与地图折叠的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!