Мне интересно, как лучше импортировать реагирующие bootstrap компоненты на моих страницах (следующий проект js)?
import Container from 'react-bootstrap/Container'
import Navbar from 'react-bootstrap/Navbar'
import Col from 'react-bootstrap/Col'
import Button from 'react-bootstrap/Button'
Или:
import { Container, Navbar, Col, Button } from 'react-bootstrap'
Первый пример более оптимизирован, чем второй? то же самое?
Для вашей информации, вот мой Компонент Layout (где я добавляю ссылки на bootstrap css):
import { useMobxStores } from '../stores'
import { observer } from 'mobx-react'
import Head from 'next/head'
import Header from './Header'
import Footer from './Footer'
import Container from 'react-bootstrap/Container'
import bootstrapStyle from 'bootstrap/dist/css/bootstrap.css'
import stylesheet from '../styles/index.scss'
const Layout = (props) => {
const {
uiStore: { pageClassName },
} = useMobxStores()
return (
<Container fluid={true}>
<Head>
<meta charSet='utf-8' />
<meta key="viewport" name="viewport" content="initial-scale=1.0, width=device-width" />
<style dangerouslySetInnerHTML={{ __html: bootstrapStyle }} />
<style dangerouslySetInnerHTML={{ __html: stylesheet }} />
</Head>
<Header />
<Container role="main">
{props.children}
</Container>
<Footer />
</Container>
)
}
export default observer(Layout)
Заранее спасибо.