Импорт компонентов из реакционной бутстрапа

Question

Я пытаюсь понять, как работать с react-bootstrap. я импортировал весь js файл, как это в моем index.html:

<!-- react-bootstrap --> 
<script src="lib/react-bootstrap/dist/react-bootstrap.min.js"></script> 

В другом js файле Я создаю Navbar, и я узнал, что я должен создать переменную из ReactBootstrap, как это:

var Navbar = ReactBootstrap.Navbar; 
... 
const MyNavBar = (
    <Navbar className="navbar-dark" fluid> 
    ... 
    </Navbar> 
); 

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

Answer 1

React-Bootstrap был оптимизирован для использования с инструментами, как Webpack или Browserify. Когда вы берете мини-дистрибутив, мы предоставляем вам возможность загружать всю библиотеку, даже если вы не обязательно используете ее все в своем приложении. Для отличного использования преимуществ этих инструментов checkout Pete Hunt - How Instagram Works.

Если это вариант, который вы не готовы к исследованию, вы можете переписать переменную ReactBootstrap на что-то более короткое, чем var rb = ReactBootstrap;, требующее меньше ввода.

Я понимаю вашу озабоченность по поводу воспринимаемой простоты исходного Bootstrap vs React-Bootstrap. Хотя при использовании React, реализация JavaScript React-Bootstrap для различных компонентов Bootstrap выполняется с использованием идиоматического метода React, что намного проще, чем использование JavaScript Bootstrap.