简介
react-on-off 是一个基于 React 16.8+ Hooks 实现的组件库，提供了开关按钮、多项选择和 Tab 切换等常用功能，使用简单方便，适合在 React 项目中使用。
安装
使用 npm 安装：
npm install react-on-off --save
或者使用 yarn 安装：
yarn add react-on-off
使用
开关按钮
Switch 组件提供了一个基础的开关按钮功能。
-- -------------------- ---- -------
------ ----- ---- -------
------ ------ ---- --------------
-------- ----- -
----- --------- ----------- - ---------------------
----- ------------ - ----- -- -
--------------------------------
-
------ -
-------
-----------------
-----------------------
----------
--
-
-上面的示例演示了如何使用 Switch 组件，它包含以下属性：
checked：用于控制开关按钮的状态，必须是一个布尔类型。onChange：状态改变时的回调函数。label：可选，开关按钮的标签。
多项选择
CheckboxGroup 组件可以用于选中多个选项的场景，如下所示：
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------------- -------- - ---- --------------
-------- ----- -
----- --------------- ----------------- - ------------------
----- ------------ - ------- -------- -- -
-- --------- -
----------------------------------- -------
- ---- -
--------------------------------------- -- - --- -------
-
-
------ -
-------------- ---------------------- ------------------------
--------- ------------------------
--------- ------------------------
--------- ------------------------
----------------
-
-上面的示例演示了如何使用 CheckboxGroup 和 Checkbox 组件，它们包含以下属性：
values：用于控制多项选择的值，必须是一个数组类型。onChange：状态改变时的回调函数。Checkbox组件的value属性用于设置每个选项的值。
Tab 切换
Tab 和 Tabs 组件可以用于创建一个带有选项卡的界面，如下所示：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ----- --- - ---- --------------
-------- ----- -
----- ----------- ------------- - ----------------------
----- ------------ - --- -- -
-----------------
-
------ -
----- --------------------- ------------------------
---- ---------- -------------
------
------
---- ---------- -------------
------
------
---- ---------- -------------
------
------
-------
-
-上面的示例演示了如何使用 Tabs 和 Tab 组件，它们包含以下属性：
activeKey：用于控制当前选中的选项卡的 key，必须是一个字符串类型。onChange：选项卡改变时的回调函数。Tab组件的key属性用于设置每个选项卡的 key，title属性用于设置选项卡的标题。
总结
react-on-off 提供了一些常用的 React 组件，使用简单方便，可以提高开发效率。希望这篇文章能够帮助你了解 react-on-off，并在项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8a238a385564ab6de5