在前端项目中，表单经常是不可或缺的一部分，其中单选框是常用的表单控件之一。@marudor/react-radio-group 是一个基于 React 的单选框组件，其使用简单，功能丰富，非常适合用于前端项目开发。在本文中，我们将详细介绍如何使用 @marudor/react-radio-group 包，并提供一些示例代码来实现不同的单选框场景。
安装
在开始使用 @marudor/react-radio-group 前，需要先安装它。可以使用 npm 在终端中执行以下命令进行安装：
npm install @marudor/react-radio-group
使用
安装完成后，就可以在项目中使用 @marudor/react-radio-group 了。在组件中引入 @marudor/react-radio-group 后，就可以通过 props 对单选框进行定制。以下是几个常用的 props：
| Props | 类型 | 默认值 | 描述 |
|---|---|---|---|
| name | string | - | 单选框的名称，用于标识不同的单选框 |
| value | any | - | 当前选中的值 |
| options | [Option] | - | 单选框的选项列表 |
| onChange | func | - | 值改变时的回调函数，接受参数 value |
| horizontal | bool | false | 是否将单选框水平排列 |
| wrapElement | string | "div" | 包装单选框的 HTML 元素，默认为 div，可以用 span 或其他元素来包装，这样可以实现自定义样式，如将多个单选框垂直排列或使用表格布局等 |
其中，options 是一个数组，每个元素是一个对象，包含以下 key：
| Key | 类型 | 描述 |
|---|---|---|
| value | any | 选项的值 |
| label | string | 选项的标签 |
| label2 | string | 可选，选项的第二标签 |
下面，我们通过几个示例来学习如何使用 @marudor/react-radio-group 和它的 props。
基础示例
在最简单的用法中，只需要传递选项数组和 onChange 函数即可。以下代码展示了如何创建一个基础的单选框组件：
-- -------------------- ---- -------
------ ---------- ---- -----------------------------
-------- ----- -
----- ------- - -
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
--
------ ----------- ----------------- ----------------- -- ------------------- ---
-水平单选框
通过将 horizontal prop 设置为 true，可以实现水平排列的单选框：
-- -------------------- ---- -------
------ ---------- ---- -----------------------------
-------- ----- -
----- ------- - -
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
--
------ ----------- ----------------- ---------- ---
-自定义包装元素
如果要实现多种样式布局，可以使用 wrapElement prop。以下是一个使用 ul 元素包装的示例：
-- -------------------- ---- -------
------ ---------- ---- -----------------------------
-------- ----- -
----- ------- - -
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
--
------ ----------- ----------------- ---------------- ---
-双标签单选框
除了默认的标签，@marudor/react-radio-group 还支持添加第二标签。可以设置每个选项的 label2 属性来显示第二标签：
-- -------------------- ---- -------
------ ---------- ---- -----------------------------
-------- ----- -
----- ------- - -
-
------ ----------
------ ------- ---
------- ----- ------ -- --- -------- ----- ------
--
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
--
------ ----------- ----------------- ---
-总结
@marudor/react-radio-group 是一个功能强大、易于使用的 React 单选框组件库。使用它可以快速方便地实现不同的单选框场景。本文介绍了如何安装和使用 @marudor/react-radio-group，以及一些常用的 props 的详细说明和示例代码，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005694c81e8991b448e4ca5