Коллапс Bootstrap с реакцией js

Привет, Я пытаюсь использовать обкатку начальной загрузки внутри реагирующего представления, и он не работает. Это очень просто, но я не понимаю, что происходит.

return (<div>
    <button className="btn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true" aria-controls="collapseExample">
        ButtonClickthis!
    </button>
    <div className="collapse" id="collapseExample">
        <div className="well">
            ...blablablacontent
        </div>
    </div>
</div>);

Ответ 1

Bootstrap не будет работать из коробки для реагирования компонентов, поскольку он анализирует DOM при загрузке и присоединяет прослушиватели событий и т.д. Вы можете попробовать что-то вроде react-bootstrap или вручную запускается внутри жизненного цикла componentDidMount.

- David

Ответ 2

Я испытал это раньше. Все, что вам нужно сделать, это вручную инициировать события внутри componentDidMount. Возможно, вы также захотите повторно запустить события в обратном вызове setState.

Ответ 3

Следует упомянуть: если вы используете это в контексте NPM/ES6 -

Вы хотите сначала импортировать jquery и установить переменную window.jQuery, прежде чем загружать загрузочный файл:

 import $ from 'jquery';
 window.jQuery = $;
 import bootstrap from 'bootstrap';

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

В целом, я считаю, что лучше всего перейти с компонентами, которые были преобразованы в мир React уже в проекте action-bootstrap. Но в этом случае (Collapse) он еще не преобразован.