我找到了幾種將引導程式匯入我的專案的方法。我不太確定是否有最佳實踐。
我安裝bootstrap并react-bootstrap使用了 npm。
選項 1：單獨匯入每個組件
import Button from 'react-bootstrap/Button'
function App() {
return (
<div className="App">
<Button variant="outline-secondary" id="button-addon1">
Button
</Button>
</div>
);
}
與選項 2：匯入所有內容
import * as bs from 'react-bootstrap'
function App() {
return (
<div className="App">
<bs.Button variant="outline-secondary" id="button-addon1">
Button
</bs.Button>
</div>
);
}
我猜：
選項 1 更精簡，因為它只匯入我使用的組件。但這是最好的使用方式嗎？尤其是在制作一個快速想法的原型時，它可能會很快被匯入，或者手動匯入所有東西可能會很痛苦。
非常歡迎任何建議！謝謝！
uj5u.com熱心網友回復：
我個人會選擇選項 2。Bootstrap 的組件名稱非常通用，可能會與其他組件混淆。
uj5u.com熱心網友回復：
從庫中匯入特定組件而不是匯入所有內容可以提高獲取和渲染時的性能。
然而，
您還可以從單個匯入陳述句中匯入多個組件
import { Form, Col, Button } from "react-bootstrap";
你也可以使用默認的 react-bootstrap 語法來匯入
它動態匯入而不命名特定組件
import * as ReactBootstrap from "react-bootstrap";
return (
<ReactBootstrap.Button bsStyle="success" bsSize="small">
Button
</ReactBootstrap.Button>
);
因此，就性能而言，多個組件匯入或單個組件匯入比其他組件要好得多。
uj5u.com熱心網友回復：
您可以在public/index.html中包含指向 CSS 和 JS 包的鏈接
您可以在此處找到 CSS 鏈接 -> 
復制 CSS 代碼并將其粘貼到head 標簽中
你可以在這里找到 JS 包 -> 
復制 JS Bundle 代碼并將其粘貼到 body 標記的末尾。像這樣??
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"> //This is the JS Bundle
</script>
</body>
您可以只在組件的 className 上使用引導類名稱，這將更容易在引導檔案中參考。
<div className="d-flex mx-2 bg-dark"></div> //Usage of bootstrap classes
uj5u.com熱心網友回復：
有默認匯入（選項 1）和命名匯入（選項 2）。通常，主要區別在于選項 1 僅匯入組件，而不是整個庫：https ://react-bootstrap.netlify.app/getting-started/introduction/#importing-components
您應該匯入單個組件，例如：react-bootstrap/Button 而不是整個庫。這樣做只會引入您使用的特定組件，這可以顯著減少您最終發送給客戶端的代碼量。
import Button from 'react-bootstrap/Button'; // or less ideally import { Button } from 'react-bootstrap';
我說一般，因為你可以設定你的捆綁工具來搖樹。通過搖樹，您可以洗掉代碼中未使用的所有內容，從而產生相同的包大小，因為您將僅通過默認匯入直接匯入某些組件。
我使用選項 2，因為我喜歡從同一個庫中剪輯所有匯入。眼睛也更容易決議進口海事組織。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/451962.html
上一篇：如何存盤redux狀態