reactstrap下載 - reactstrap源代碼下載

reactstrap

其他源碼

v9.2.3

下載

建立狀態

Reactstrap

Bootstrap 5的無狀態反應組件。

如果您使用的是Bootstrap 4，則需要使用ReactStrap V8

入門

請按照Create-React-App指令開始啟動，然後按照添加Bootstrap的ReactStrap版本進行操作。

tl; dr

 npx create-react-app my-app
cd my-app/
npm start

或者，如果NPX（節點> = 6和NPM> = 5.2）

 npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

然後打開http：// localhost：3000/以查看您的應用。應用程序的初始結構是設置的。接下來，讓我們添加React -Strap和Bootstrap。

添加引導程序

從NPM安裝ReactStrap和Bootstrap。 ReactStrap不包括Bootstrap CSS，因此也需要安裝：

 npm i bootstrap
npm i reactstrap react react-dom

在src/index.js文件中導入bootstrap css：

 import 'bootstrap/dist/css/bootstrap.css' ;

導入src/App.js文件或您的自定義組件文件中所需的ReactStrap組件：

 import { Button } from 'reactstrap' ;

現在，您準備在渲染方法中定義的組件層次結構中使用導入的ReactStrap組件。這是使用ReactStrap的示例App.js重做。

依賴性

所需的同行依賴

這些庫不與React -Strap捆綁在一起，並且在運行時需要：

反應
反應

關於項目

該庫包含有利於組成和控制的React Bootstrap組件。該庫不取決於jQuery或Bootstrap JavaScript。但是，通過React-popper poppers.js依靠諸如工具提示，彈出式和自動翻轉下拉列表等內容的高級定位。

為了充分利用該庫，有一些核心概念需要理解。

預計您的內容將通過Props.Children組成，而不是使用命名的道具通過組件。

 // Content passed in via props
const Example = ( props ) => {
  return (
    < p > This is a tooltip < TooltipTrigger tooltip = { TooltipContent } > example </ TooltipTrigger > ! </ p >
  ) ;
}

// Content passed in as children (Preferred)
const PreferredExample = ( props ) => {
  return (
    < p >
      This is a < a href = "#" id = "TooltipExample" > tooltip </ a > example.
      < Tooltip target = "TooltipExample" >
        < TooltipContent />
      </ Tooltip >
    </ p >
  ) ;
}

該庫中的屬性用於在狀態下傳遞，方便地應用修飾符類，啟用高級功能（例如係繩）或自動包含基於非核心的元素。
示例：
- isOpen - 諸如下拉列表，彈出式，工具提示等項目的當前狀態
- toggle - 在控制組件中切換等isOpen的回調
- color - 應用顏色類，例如： <Button color="danger"/>
- size - 用於控制尺寸類。例如： <Button size="sm"/>
- tag - 通過傳遞元素名稱或組件來自定義組件輸出
- 替代樣式類或visually-hidden內容時，基於布爾值的道具（屬性）