Question

我有一系列我想创建的面板，最终会插入到手风琴中。

在一个文件中，我有：

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

Answer 1

这是解决方案

<Accordion>
  {this.item.map(item =>
     <AcPanel key={item.id} item={item} eventKey={item.id} />
  )}
</Accordion>

在AcPanel类中，使用{... this.props}获取所有属性，并在父类上分配值，就像我使用＆＃34; eventKey = {item.id}＆＃34;。

<Panel header={`Collapsible Group Item`} bsClass='class-name' {...this.props}>
content here
</Panel>

Answer 2

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

我认为问题必须与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的任何道具名称相同，您可能会破坏某些内容并将其破坏 - 如果您担心，则应该直截了当地遵循代码和看看传递的是什么。

Answer 3

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

在手风琴的父组件中，向该状态添加一个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

在您的孩子（项目）元素的“手风琴”切换中，添加传递的函数和道具：

<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

Answer 4

如果手风琴的孩子不是Panels，并且通过将Panel包装在我的Content类中，那么

react-bootstrap似乎会抱怨我正在这样做。

要解决这个问题，我不得不放弃React的惯例。我创建了另一个js文件而不是react.js文件，而不是创建类Content。通过将此文件视为普通的js文件，我可以调用此文件中的一个函数，该函数映射每个＆＃39; this.state.contents＆＃39;并返回一个Panel对象。

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

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

react-bootstrap手风琴没有与地图折叠

5 个答案: