Есть ли способ без проблем использовать несколько версий Bootstrap в React?

Question

Предположим, я импортирую две версии Bootstrap (Bootstrap 3 и Bootstrap 4) для двух разных компонентов в приложении React. Допустим, они <App/> (Bootstrap 3) и <Test/> (Bootstrap 4). Изначально я нахожусь на компоненте <App/>. Теперь, если я перейду к <Test/> компоненту, который загружает и импортирует Bootstrap 4, будет ли Bootstrap 3 на <App/> компонент удален? Или все равно будет загружаться.

Answer 1

Это очень интересный вопрос. Ответ зависит от того, как вы использовали Bootstrap для этих двух компонентов Test и App.

Обычно люди просто импортируют bootstrap css, очевидно, это не будет работать просто потому, что я думаю даже Bootstrap3 и 4 конфликтуют друг с другом.

Но если взять фрагмент 3 или 4 и использовать его локально внутри компонента через styled-component или любой css in js подход. Это будет работать в теории.

На практике это сопряжено с другими проблемами, потому что Bootstrap зависит от множества внутренних служебных функций, просто для его вращения требуется много работы, которая может не стоить того, если вы просто хочу использовать его для питания одного компонента.

Я остановлюсь здесь, вы найдете немало библиотеки, которая пытается решить эту проблему, назовите несколько material-ui, reactstrap. Просто поиск Bootstrap react даст вам кое-что.