'Свернуть' не определено реагировать / jsx-no-undef - PullRequest
0 голосов
/ 28 июня 2019

Я новичок в React, сейчас я пытаюсь сделать боковую панель и скрыть пункт меню show collapse.

здесь есть функция =>

 collapsemetoggle(){
        this.setState(state => ({ collapsemeopen: !state.collapsemeopen }));
      }


 <div className="list-group list-group-flush">
          <a href="#" className="list-group-item list-group-item-action bg-light">Dashboard</a>              
          <a onClick={this.collapsemetoggle} data-toggle="collapse" className="list-group-item list-group-item-action bg-light">Collapase Me</a>

          <Collapse isOpen={this.state.collapsemeopen}>
            <div className="list-group list-group-flush">
              <a href="#" className="list-group-item list-group-item-action bg-light">Dashboard</a>                  
            </div>
          </Collapse>
        </div>

      </div>

Но почему

'Свернуть' не определено реагировать / показывается jsx-no-undef

?Я просто ссылаюсь отсюда =>

Реактивный переход

Я пытаюсь добиться, чтобы получить боковую панель, как =>

Боковая панель

Другие люди используют ul li для списка меню, и я пытаюсь сделать с collapse.Это правильный путь?Если нет, дайте мне знать, например.

Ответы [ 2 ]

1 голос
/ 28 июня 2019

import Свернуть:

import {Collapse} from 'react-bootstrap'

использовать реквизиты вместо isOpen

 <Collapse in={this.state.open}>
      <div id="example-collapse-text">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
        labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </Collapse>
1 голос
/ 28 июня 2019

При использовании Bootstrap или любой другой инфраструктуры пользовательского интерфейса вам необходимо импортировать компонент, который вы используете. Поместите это поверх вашего файла, и он автоматически импортирует его.

import Collapse from 'react-bootstrap/Collapse'

Кстати, реквизит isOpen - это не коллапс. Вы должны использовать in

<Collapse in={this.state.collapsemeopen}>
...