我有一系列我想创建面板的项目，这些面板最终会被插入到手风琴中。
在一个文件中，我有：
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>
);
当我将 Accordion 和 Panel 放在同一个文件中时，它们就可以工作了。但是当我在将它们分成两个文件后使用 map 生成 Panel 时，它似乎没有崩溃。
这是解决方案
<Accordion>
{this.item.map(item =>
<AcPanel key={item.id} item={item} eventKey={item.id} />
)}
</Accordion>
在 AcPanel 类中，使用 {...this.props} 获取所有属性并在父类上分配值，就像我使用“eventKey={item.id}”一样。
<Panel header={`Collapsible Group Item`} bsClass='class-name' {...this.props}>
content here
</Panel>
对于任何使用 Accordion.Toggle 的人来说，这就是我让手风琴在地图上折叠的方式。
在 Accordion 的父组件中，向状态添加一个 activeKey 值。创建一个函数来处理将在映射期间传递给手风琴的每个子组件的活动键更改。确保将该函数绑定到父组件。
this.state = {
items = []
activeKey: ''
}
handleActiveKeyChange = activeKey => {
if (this.state.activeKey === activeKey) {
//allows us to close expanded item by clicking its toggle while open
activeKey = -1
}
this.setState({ activeKey })
}
在您的渲染方法中传递相应的活动键状态和功能：
<Accordion activeKey={this.state.activeKey}>
{this.state.items.map((item, index) => (
<Item eventKey={index} handleActiveKeyChange={this.handleActiveKeyChange} />
))}
</Accordion
在您的子（项目）元素的手风琴切换中，添加传递的函数和props：
<Card>
<Card.Header>
<Accordion.Toggle
eventKey={this.props.eventKey}
onClick={() => this.props.handleActiveKeyChange(this.props.eventKey)}
>
//+ icon here
</Accordion.Toggle>
</Card.Header>
//card content here
</Card
我找到了一个解决方案，可以让您在单独的文件中使用组件。
我认为问题一定是Accordion因为无法将某些props传递给 ，Panel因为它们会转到包装组件，所以我尝试收集所有不是我的props并将它们传递给面板：
// make sure you have all your own props specified before ...props
// so that they can't mess up the panel.
const { body, ...props } = this.props
return(
<Panel {...props}>
{body}
</Panel>
);
如果要在 上指定任何propsPanel，请确保它们位于收集的props之后，以便它们优先于任何默认值：
const { body, ...props } = this.props
return(
<Panel {...props}
bsStyle="info">
{body}
</Panel>
);
如果您选择任何与Accordion传递给的名称相同的props名称Panel，您可能会破坏某些东西并破坏它 - 如果您担心，遵循代码并查看传递的内容应该很简单。
如果手风琴的孩子不是面板，react-bootstrap 似乎会抱怨，通过将面板包装在我的内容类中，我就是这样做的。
为了解决这个问题，我不得不脱离 React 的约定。我没有创建一个类 Content，而是创建了另一个 js 文件而不是 react.js 文件。通过将此文件视为普通的 js 文件，我能够调用该文件中的一个函数，该函数映射到每个“this.state.contents”并返回一个 Panel 对象。
整个文件将返回一个 Panel 类数组。