React Bootstrap 面板接受一个节点作为标头（每个：https : //github.com/react-bootstrap/react-bootstrap/blob/v0.20.1/src/Panel.js#L144和http://react -bootstrap.github.io/components.html#panels-props），因此您可以将具有适当 onClick 处理程序的内容作为标题传递给它，可能类似于：

<Accordion onSelect={this.handleSelect} >
  <Panel header={<div onClick={() => {console.log('Clicked')}}>"Collapsible Group Item #1"</div} eventKey="1">
    Ad vegan
  </Panel>
  <Panel header="Collapsible Group Item #2" eventKey="2">
    Cliche docet
  </Panel>
</Accordion>

我通过构建 2 个 react 组件解决了类似的问题：一个用于创建 PanelGroup，另一个用于创建组内的每个 Panel 项目。然后在面板项目组件中，我为切换 onClick 事件编写了一个自定义处理程序，将面板的“扩展”属性设置为组件的状态。通过使用自定义组件的状态，我能够将每个切换图标的状态分开。

自定义面板组组件：

import CustomPanelGroupItem from './CustomPanelGroupItem';
import React from 'react';
import PanelGroup from 'react-bootstrap/lib/PanelGroup';

class CustomPanelGroup extends React.Component {
    render() {
        return (
            <PanelGroup 
                accordion 
                id='custom-panel-group-accordion'
            >
                {
                    PanelGroupData.map((item, key) => {
                        return (
                            <CustomPanelGroupItem
                                eventKey={key}
                                customPanelGroupItem={item}
                            />
                        )
                    })
                }                

            </ PanelGroup>
        )
    }
}

export default CustomPanelGroup;

自定义面板组件：

import Col from 'react-bootstrap/lib/Col';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
import Grid from 'react-bootstrap/lib/Grid';
import React from 'react';
import Panel from 'react-bootstrap/lib/Panel';

class CustomPanelGroupItem extends React.Component {
    state = {
        expanded: false,
        toggleIcon: faAngleRight
    }

    handleToggle = () => {
        this.setState({
            expanded: !this.state.expanded,
            toggleIcon: this.state.expanded ? faAngleRight : faAngleDown
        });
    }

     render() {
        return (
            <Panel 
                eventKey={this.props.eventKey}
                expanded={this.state.expanded}
            >
                <Panel.Heading >
                    <Panel.Toggle 
                        componentClass='div'
                        onClick={this.handleToggle}
                    >
                        {/* Code here for the panel toggle */} 
                    </Panel.Toggle>                 
                </Panel.Heading>
                <Panel.Body collapsible>
                    {/* Code here for the panel body */}
                </Panel.Body>
            </Panel>
        )
    }
}

export default CustomPanelGroupItem;