Аккордеон React-Bootstrap, не работающий с итерацией карт

WahidSherief спросил: 13 июня 2018 в 10:39 в: javascript

, реализовал аккордеон в соответствии с документацией по реакции-бутстрапа. Все работает отлично, за исключением случаев, когда одна панель нажата, чтобы развернуть другую расширенную панель, не закрывается. Он отлично работает без итератора карты, но с картой его не работает. Мои коды приведены ниже:

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>
    );
  }}

Необходима экспертная помощь.

1 ответ

Есть решение
Tholle ответил: 13 июня 2018 в 10:53

Каждый Section состоит из PanelGroup с одним Panel каждым в вашем коде. Если вместо этого вы используете один PanelGroup для всех панелей, они автоматически закрываются, как ожидалось.

Дополнительное видео по вопросу: Аккордеон React-Bootstrap, не работающий с итерацией карт

React Js tutorial - React bootstrap quick tutorial

Build a Website with React, React-Bootstrap and React-Router

React Course - City Tours Project