如何在 React 中创建一个切换开关作为可重用组件？

开关（Switch）是常用的UI组件，它用来切换某些功能的开启和关闭状态。在React中，我们可以通过封装一个可重用的开关组件来实现这个功能。本文将介绍如何使用React创建一个开关组件。

首先，我们需要考虑开关组件的核心功能：切换状态。为了达到这个目的，我们可以使用 useState hook 来管理开关的状态。可以像这样实现：

import React, { useState } from "react";

function Switch() {
  const [isOn, setIsOn] = useState(false);

  function toggleSwitch() {
    setIsOn(!isOn);
  }

  return (
    <button onClick={toggleSwitch}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
}

export default Switch;

在上面的代码中，我们使用了 useState 来创建一个名为 isOn 的布尔值状态。初始化为 false。每次切换开关状态时，我们会调用 toggleSwitch 函数, 它会更新 isOn 状态的值并重新渲染组件。在渲染组件时，根据 isOn 状态的值来展示相应的文字 "ON" 或 "OFF"。

接下来，我们可以通过 CSS 样式来美化我们的开关。以下是添加样式的示例代码：

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

上面代码中使用了伪元素的方法实现了开关的样式。将 HTML 结构和样式应用到我们的开关组件，代码如下：

import React, { useState } from "react";
import "./Switch.css";

function Switch() {
  const [isOn, setIsOn] = useState(false);

  function toggleSwitch() {
    setIsOn(!isOn);
  }

  return (
    <label className="switch">
      <input type="checkbox" checked={isOn} onChange={toggleSwitch}/>
      <span className="slider"/>
    </label>
  );
}

export default Switch;

在渲染 Switch 组件时，我们将它包装在一个 <label> 元素中，用来关联输入框和伪元素。然后，我们将伪元素用作开关的滑块，为其应用了选中与未选中的样式。

现在我们已经实现了一个完整的开关组件，我们可以将它导出并在应用程序的其他部分中重复使用。

希望这篇文章能帮助你了解如何在React中实现可复用的切换开关组件。