在前端开发中，我们经常使用组件库来加快我们的开发效率。其中一个强大的组件库就是 react-bs-components，这个组件库提供了许多常用的 Bootstrap 组件，但是是以 React 组件的形式进行封装的。使用这个组件库可以快速地搭建出一个漂亮的前端页面。
安装
使用 react-bs-components 需要先安装依赖包。使用 npm 进行安装
npm install react-bs-components --save
引入
在需要使用 react-bs-components 的文件中引入组件库。
-- -------------------- ---- ------- ------ - ------- ----- ----- ----------- ------ ------- ------ - ---- ----------------------
使用
下面我们介绍一下几个常用的组件的使用方法。
Button
Button 是一个按钮组件，我们可以通过 onClick 属性来设置按钮点击事件，通过 disabled 属性设置按钮是否禁用，通过 color 属性设置按钮的样式。
<Button onClick={() => alert('Hello world!')} color="primary">
Click me!
</Button>Card
Card 是一个卡片组件，我们可以通过 title 属性设置卡片的标题，通过 width 属性设置卡片的宽度。
<Card title="Hello" width="300px"> <p>This is a card.</p> </Card>
Form
Form 是一个表单组件，我们可以通过 onSubmit 属性设置表单提交时的事件，通过 controls 属性设置表单的控件，包括输入框、下拉框、单选框等等。
-- -------------------- ---- -------
----- ------------- - ------- -- -
-----------------------
--------------------
--
----- -------- - -
-
------ -------
------------ ------ ---- ------
----- -------
--
-
------ --------- -------
------------ ------- - -------
----- ---------
-------- -
- ------ ------ ------ ----- --
- ------ ------- ------ ------ --
- ------ --------- ------ -------- --
--
--
-
------ ---------
----- --------
-------- -
- ------ ------- ------ ------ --
- ------ --------- ------ -------- --
--
--
--
----- ------------------------ ------------------- --InputGroup
InputGroup 是一个输入框组件，我们可以通过 addonBefore 属性设置输入框前面的内容，通过 addonAfter 属性设置输入框后面的内容，通过 type 属性设置输入框的类型。
<InputGroup addonBefore="$" addonAfter=".00" type="number" defaultValue={0} />Modal
Modal 是一个弹窗组件，我们可以通过 show 属性来控制弹窗是否显示，通过 onClose 属性来设置弹窗关闭时的事件。
-- -------------------- ---- -------
----- ----------- ------------- - ----------------
------ -
--
------- ----------- -- ------------------------ --------------
------ ---------------- ----------- -- ---------------------
--------- -----------
--------
---
--Navbar
Navbar 是一个导航栏组件，我们可以通过 brand 属性设置导航栏的标题，通过 items 属性设置导航栏的菜单项。
-- -------------------- ---- -------
----- ----- - -
-
------ -------
----- ----
--
-
------ --------
----- ---------
--
-
------ ----------
----- -----------
--
--
------- --------- -------- ------------- --Toast
Toast 是一个提示框组件，我们可以通过 show 属性来控制提示框是否显示，通过 duration 属性来设置提示框显示的时间，通过 onClose 属性来设置提示框关闭时的事件。
-- -------------------- ---- -------
----- ----------- ------------- - ----------------
------ -
--
------- ----------- -- ------------------------ --------------
------ ---------------- ----------- -- -------------------- ----------------
----- ------
--------
---
--总结
react-bs-components 是一个非常实用的组件库，它包含了 Bootstrap 中经常使用的组件，并以 React 组件的形式进行封装。使用它可以快速地搭建出一个漂亮的前端页面。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005673d81e8991b448e3c09