如何在面板标题中访问 react-bootstrap 面板折叠状态？

Question

在使用react-bootstrap Collapsible Panel 时，有没有办法从面板标题访问面板的折叠状态？在以下示例中：

<Panel>
    <Panel.Heading>
        <Panel.Title toggle>
            This is the title of the panel
            <i className="fa fa-angle-double-right" />
        </Panel.Title>
    </Panel.Heading>
    <Panel.Collapse>
        <Panel.Body>
            This is the body of the panel
        </Panel.Body>
    </Panel.Collapse>
</Panel>

我希望 Panel.Title 中的字体 awesome <i> 在面板打开时自动在 fa-angle-double-right 和 fa-angle-double-down 之间切换，并在面板关闭时切换回来。但我似乎无法从面板标题访问面板的折叠状态。

Answer 1

您链接到的文档似乎有您正在寻找的答案。

您应该能够维护一些本地状态 this.state.open，并将其作为 expanded 属性传递给面板。

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      // to share the state, we must maintain it ourselves
      open: true
    };
  }


  render() {
    const iconClass = this.state.open
      ? 'fa-angle-double-down'
      : 'fa-angle-double-right';

    return (
      <Panel id="example-1" expanded={this.state.open}>
        <Panel.Heading> 
          <Panel.Title
            onClick={() => this.setState({ open: !this.state.open})}>
            This is the title of the panel
            <i className={iconClass} />
          </Panel.Title>
        </Panel.Heading>
        <Panel.Collapse>
          <Panel.Body>
            This is the body of the panel
          </Panel.Body>
        </Panel.Collapse>
      </Panel>
    );
  }
}