react-toggle-2 是一个 React 组件库，用于创建美观的开关组件。本文将为您介绍如何使用此 npm 包。
安装
在终端中运行以下命令来安装 react-toggle-2：
npm install react-toggle-2
使用
在您的 React 组件中引入 react-toggle-2：
import Toggle from 'react-toggle-2'; import 'react-toggle-2/dist/toggle.css';
然后，在 JSX 中使用 <Toggle> 组件：
<Toggle
checked={this.state.checked}
onChange={this.handleToggleChange}
/>在上述示例代码中，checked 属性用于指示开关状态，onChange 属性用于将开关状态传递到 handleToggleChange 方法中进行处理。
开关状态
您可以使用 checked 属性来设置开关状态。例如：
<Toggle checked={true} />在上述示例代码中，将开关状态设置为“开”。
您还可以使用 defaultChecked 属性来设置默认开关状态。例如：
<Toggle defaultChecked={true} />在上述示例代码中，将默认开关状态设置为“开”。
labels
您可以使用 checkedLabel 和 uncheckedLabel 属性来设置开关上的标签文本。例如：
<Toggle
checkedLabel={'打开'}
uncheckedLabel={'关闭'}
/>在上述示例代码中，将开关上的标签文本分别设置为“打开”和“关闭”。
可用性
您可以使用 disabled 属性禁用开关。例如：
<Toggle checked={true} disabled={true} />在上述示例代码中，将开关禁用。
主题颜色
您可以使用 icons 属性来更改开关的主题颜色。例如：
-- -------------------- ---- -------
------ ------ ---- -----------------
------ ---------------------------------
------ ------ ---- -----------
------ ------- ---- ------------
-------
--------
-------- ---- ------------ ---
---------- ---- ------------- --
--
--在上述示例代码中，将开关的主题颜色更改为 on.svg 和 off.svg 中定义的图标。
总结
本文介绍了如何使用 react-toggle-2，并提供了一些示例代码。通过学习本文，您将能够在自己的项目中使用 react-toggle-2 创建美观的开关组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560ae81e8991b448deeea