react-bootstrap手风琴不与地图折叠答案

【问题标题】：react-bootstrap Accordion not collapsing with mapreact-bootstrap手风琴不与地图折叠
【发布时间】：2015-05-08 11:44:06
【问题描述】：

我有一组我想创建面板的项目，最终将使用这些项目插入手风琴。

在一个文件中，我有：

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 放在同一个文件中时，它们可以工作。但是当我将它们分成两个文件后使用地图生成面板时，它似乎并没有崩溃。

【问题讨论】：

是的，这种废话是行不通的。不知道如何通过单文件方式解决

标签： twitter-bootstrap accordion panel reactjs react-bootstrap

【解决方案1】：

解决办法

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

【讨论】：

【解决方案2】：

对于使用 Accordion.Toggle 的任何人，这就是我让手风琴在地图上折叠的方式。

在 Accordion 的父组件中，为 state 添加一个 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

在您的子（项目）元素的 Accordion 切换中，添加传递的函数和道具：

<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

【讨论】：

非常感谢@Ethan，这是自一周前以来最好的解决方案，我尝试解决这个问题并搜索了所有网络，直到我得到这个再次感谢您

【解决方案3】：

我找到了一个解决方案，可让您在单独的文件中使用组件。

我认为问题一定与Accordion 无法将某些道具传递给Panel 相关，因为它们转而使用了包装组件，所以我尝试收集所有不属于我的道具并将它们传递给面板：

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

如果您想在 Panel 上指定任何道具，请确保它们遵循收集的道具，以便它们优先于任何默认值：

const { body, ...props } = this.props

return(
  <Panel {...props}
         bsStyle="info">
    {body}
  </Panel>
);

如果您选择与 Accordion 传递给 Panel 的任何道具名称相同的任何道具名称，您可能会破坏并破坏它 - 如果您担心，应该直接按照代码并查看正在发生的事情传下去了。

【讨论】：

【解决方案4】：

如果手风琴的孩子不是面板，react-bootstrap 似乎会抱怨，并且通过将面板包装在我的 Content 类中，我就是这样做的。

为了解决这个问题，我不得不脱离 React 的约定。我没有创建一个类 Content ，而是创建了另一个 js 文件而不是 react.js 文件。通过将此文件视为普通 js 文件，我能够调用此文件中的一个函数，该函数映射到每个 'this.state.contents' 并返回一个 Panel 对象。

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

【讨论】：

@ArslArsl 证明可以使用普通组件来实现。看我的回答。

【解决方案5】：

最简单的方法是在 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>

【讨论】：