3

I have an array of items I would like to create Panels out of which would eventually be inserted into the Accordion.

In one file, I have:

var items = this.state.contents.map(function(content, index) {
  return <Content {...content}, key={index}/>
};

return (
  <Accordion>
    {items}
  </Accordion>
);

In another file called Content I have:

return(
  <Panel header={this.props.header} eventKey={this.props.key}>
    {this.props.body}
  </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.

4

5 回答 5

2

对于使用 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

在您的子（项目）元素的 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
于 2019-12-11T22:28:35.773 回答
2

这是解决方案

<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>
于 2017-02-13T10:43:58.780 回答
1

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

我认为问题一定与Accordion无法将一些道具传递给 the 相关，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，您可能会破坏某些东西并破坏它 - 如果您担心，应该直接按照代码并查看正在传递的内容。

于 2016-12-05T08:21:18.483 回答
0

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

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

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

于 2015-03-13T18:03:09.063 回答
0

最简单的方法是在 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>
于 2020-10-08T18:18:32.230 回答