前言
@igloo-be/netlify-cms-widget-boolean 是一个基于 Bool 类型的布尔型组件，常见于使用 Netlify CMS 时对于一些布尔型数据的输入。本篇文章将详细讲述如何安装使用该组件，并提供示例代码以供参考。
安装
使用 npm 安装：
npm install @igloo-be/netlify-cms-widget-boolean
或者使用 yarn 安装：
yarn add @igloo-be/netlify-cms-widget-boolean
使用
安装完毕后，在 Netlify CMS 的配置文件中导入该组件并配置。示例代码如下：
import CMS from 'netlify-cms-app';
import { BooleanControl, PreviewBoolean } from '@igloo-be/netlify-cms-widget-boolean';
CMS.registerWidget('boolean', BooleanControl, PreviewBoolean);配置完成后，在 Netlify CMS 中进行使用即可。布尔型数据的输入字段将被替换成该组件。
详解
BooleanControl
BooleanControl 为组件的主要控制部分，负责展示数据输入界面以及保存数据。
在默认状态下，BooleanControl 需要传入两个参数：
props: 用于配置当前组件的参数对象，包含以下内容：
-- -------------------- ---- ------- - ------ ------ ------ ----------------- --------------- ----------------- --------- ------- --------- --
state: 当前组件的状态对象。默认情况下，状态对象仅包含checked，用于表示当前组件是否被选中。
同时，该组件继承了 Control，它有自己的一些方法：
handleChange: 当用户点击复选框时触发，用于更新组件状态。handleBlur: 当组件失去焦点时触发，自动保存数据。handleSubmit: 保存数据。
PreviewBoolean
PreviewBoolean 负责在 Netlify CMS 的预览中展示该组件。
在默认状态下，PreviewBoolean 接收三个参数：
props: 用于配置当前组件的参数对象，包含以下内容：
{
value,
field,
metadata,
};state: 当前组件的状态对象。entry: 当前项的 key 值，用于从 CMS 数据库中查询该项数据。
在该组件中，我们使用 Util 中的 getBoolFromString 方法将输入的字符串转换成布尔类型。
-- -------------------- ---- -------
------ - ----------------- - ---- -----------------------
----- -------------- - -- ----- -- -- -
----- --------- - -------------------------
-- ----------- -
------ -------------------
-
------ -------------------
-总结
在本文中，我们学习了 @igloo-be/netlify-cms-widget-boolean 的安装及使用，并对其组件的详解进行了对应的展示。通过本文的学习，我们能够更加清晰地了解该 npm 包为我们的前端开发带来的优秀体验，并合理地将其应用到实际开发中。
示例代码
Netlify CMS 中的配置文件：
import CMS from 'netlify-cms-app';
import { BooleanControl, PreviewBoolean } from '@igloo-be/netlify-cms-widget-boolean';
CMS.registerWidget('boolean', BooleanControl, PreviewBoolean);使用 BooleanControl 的示例代码：
-- -------------------- ---- -------
-------- -
----- - ------ ------ ----- - - -----------
------ -
-----
------
---------------
----------
---------------
----------------------------
--
------ --------------------------------------------
------
--
-使用 PreviewBoolean 的示例代码：
-- -------------------- ---- -------
------ - ----------------- - ---- -----------------------
----- -------------- - -- ----- -- -- -
----- --------- - -------------------------
-- ----------- -
------ -------------------
-
------ -------------------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5451ab1864dac66958