Коллапс 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) он еще не преобразован.