React Bootstrap 展开全部/全部折叠 <Panel.Body> 在映射循环中创建的组件

Question

我正在尝试从嵌套的PanelGroup组件中创建一个react-bootstrap应用程序。我一切正常，但现在我被要求添加一个展开全部/全部折叠链接。由于我是通过地图循环生成面板的，因此我不完全确定这是否可行。这是我到目前为止所拥有的：

{data.map((item, i)=>{
                return (
                    <PanelGroup key={i + 1} accordion id={(i + 1).toString() + 'accordion'}>
                        <Panel key={i + 1} eventKey={(i + 1).toString() }>
                            <Panel.Heading>
                                <Panel.Title toggle>
                                    {this.getHeaderNode(i, data)}
                                </Panel.Title>
                            </Panel.Heading>
                            <Panel.Body collapsible>
                                { this.getChildrenNode(i, data) }
                            </Panel.Body>
                        </Panel>
                    </PanelGroup>
                );
            })}

我尝试实现一些不同的属性，如此处的文档中所述

例如，我在Panel.Body中添加了一个将侦听状态的属性：

expanded={this.state.expanded}

然后，我的想法是添加一个按钮作为另一个组件，该组件将在单击时触发函数，例如：

_toggleExpand: function() {
    this.setState({expanded: !this.state.expanded});
  }

但是，如何让面板确定用户是否单击了

折叠/全部展开按钮，或者用户是否单击了Panel.Title展开/折叠单个面板？

Answer 1

正如@Kunukn猜到的那样，Panel.Group 不支持折叠所有扩展我正在寻找的所有功能。因此，我只是将本机引导类添加到适当的htmldivs中：

<div key={(n + i).toString() + 'nested'} className={'card'}>
                        <div className={'card-header'} >
                            <h3>
                                <a className={ ('collapsed ' + nestedClass).toString() }
                                   data-toggle="collapse" data-target={'#' + n + 'panel' + random}>
                                    {this.getHeaderNode(n, childUnits)}
                                    </a>
                            </h3>
                        </div>
                        <div id={n + 'panel' + random} className={ 'collapse' }>
                            <div className={'panelBody'}>
                                { this.getChildrenNodes(n, childUnits, false) }
                            </div>
                        </div>
                    </div>

然后，将 jQuery Bootstrap 折叠方法应用于事件侦听器：

$('#accordion .collapse.in').collapse('hide');

由于我不需要在初始页面加载后更改此组件的状态，因此这符合我的目的。