react-custom-radio 是一款可以方便地自定义样式的 React 单选按钮组件。它提供了简单易用的 API，可以让开发者快速实现各种样式的单选按钮。
安装
可以通过 npm 安装 react-custom-radio：
npm install react-custom-radio --save
使用
使用 react-custom-radio 构建一个单选按钮组需要三个组件：
RadioGroup组件，负责管理单选按钮组；Radio组件，用于渲染单选按钮；Label组件，用于渲染单选按钮的标签。
RadioGroup 组件
RadioGroup 组件用于管理单选按钮组，它需要以下属性：
name：单选按钮组的名称；value：当前选中的单选按钮的值；onChange：当单选按钮的值改变时触发的事件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ---------------------
-------- -------------- -
----- ------- - -
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- --
--
----- ------- --------- - --------------------
-------- ---------------------- -
-------------------
-
------ -
-----------
---------------------
-------------
-----------------------
-----------------
--
--
-Radio 组件
Radio 组件用于渲染单选按钮，它需要以下属性：
value：单选按钮的值；isChecked：单选按钮是否被选中；onChange：当单选按钮被选中时触发的事件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------------------
-------- --------- ------ ---------- -------- -- -
------ -
------
-------------
---------------------
-------------------
--
--
-Label 组件
Label 组件用于渲染单选按钮的标签，它需要以下属性：
value：单选按钮的值；text：单选按钮的标签文本。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------------------
-------- --------- ------ ---- -- -
------ -
------
-------------
-----------
--
--
-自定义样式
react-custom-radio 默认使用 Material Design 样式，如果需要自定义样式，可以使用 RadioGroup 的 renderRadio 属性，通过自定义渲染函数来控制单选按钮的样式。例如：
-- -------------------- ---- -------
-------- --------------- ------ ---------- -------- -- -
------ -
------ ---------------------
------
------------
-------------
-------------------
------------ -- ----------------
--
--------------------
------ ------
--------- -
-------- -----
------------ -------
-
------------------- -
-------- -----
-
------------------- - ---- -
-------- -------------
------ -----
------- -----
-------------- ----
------- --- ----- -----
------------- ----
-
--------------------------- - ---- -
----------------- -----
-
----------
--------
--
-然后将 renderMyRadio 函数作为 RadioGroup 的 renderRadio 属性传递进去即可：
-- -------------------- ---- -------
------ -
-----------
---------------------
-------------
-----------------------
-----------------
---------------------------
--
--完整示例
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ------ ----- - ---- ---------------------
-------- ----- -
----- ------- - -
- ------ ------ ------ --- --
- ------ ------ ------ --- --
- ------ ------ ------ --- --
--
----- ------- --------- - --------------------
-------- ---------------------- -
-------------------
-
------ -
-----------
---------------------
-------------
-----------------------
-----------------
--------------- ------ ---------- -------- -- -- -
------ ---------------------
------
------------
-------------
-------------------
------------ -- ----------------
--
--------------------
------ ------
--------- -
-------- -----
------------ -------
-
------------------- -
-------- -----
-
------------------- - ---- -
-------- -------------
------ -----
------- -----
-------------- ----
------- --- ----- -----
------------- ----
-
--------------------------- - ---- -
----------------- -----
-
----------
--------
--
--
--
-
------ ------- ----结语
react-custom-radio 是一个十分方便的制作单选按钮的 npm 包，使用它可以轻易实现自定义的单选按钮组件，同时，这也能够使得开发者更加方便地处理各种情况，提高开发效率。通过本文的学习，相信大家对于 react-custom-radio 的使用已经更加清晰了吧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005681c81e8991b448e43e2