Question

我已经根据react-bootstrap文档实施了手风琴。除了单击一个面板以展开其他展开的面板以外，其他所有功能都无法正常工作。在没有地图迭代器的情况下，它可以正常工作，但在地图上却无法工作。我的代码如下：

Accordion.js

return (
   <div className="accordion-container">
       <h1>Accordion Component</h1>
          {posts.map(post =>
             <Section post={post} key={post.id} item={post.id.toString()}/>
         )}
   </div>
);

Section.js

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

    this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      activeKey: "1"
    };
  }

  handleSelect(activeKey) {
    this.setState({ activeKey });
  }

  render() {
    console.log(this.props.item);
    return (
        <PanelGroup 
            accordion
            id="accordion-controlled-example"
            activeKey={this.state.activeKey}
            onSelect={this.handleSelect}
        >
            <Panel eventKey={this.props.item}>
                <Panel.Heading>
                    <Panel.Title toggle>{this.props.post.title}</Panel.Title>
                </Panel.Heading>
                <Panel.Body collapsible>
                    {this.props.post.body}
                </Panel.Body>
            </Panel>
        </PanelGroup>
    );
  }

}

需要专家的帮助..

Answer 1

每个Section由一个PanelGroup组成，每个Panel在您的代码中。如果您改为对所有面板使用一个PanelGroup，则它们将按预期自动关闭。

React-Bootstrap手风琴不适用于地图迭代

1 个答案: