构建可复用的React开关切换组件：从零到一完整指南

本文详细介绍了如何使用React和SCSS创建一个iOS风格的开关切换组件，涵盖组件构建、样式设计、状态管理、键盘可访问性实现等完整开发流程，帮助开发者掌握可复用组件的开发技巧。

构建可复用的React开关切换组件

关键要点

  • 使用Create React App快速搭建新React应用，构建可复用的iOS风格开关切换组件
  • 利用SCSS为开关切换组件设计样式，确保视觉吸引力并符合现代设计标准
  • 将开关切换实现为React受控组件，使用props动态管理其状态和行为
  • 通过键盘可访问性和适当的ARIA属性增强可访问性
  • 使用PropTypes进行组件内类型检查，确保传递必需数据且类型正确
  • 通过SCSS变量和媒体查询探索高级主题和响应式设计，使开关切换在不同设备上自适应

第1步 - 创建React应用

使用Create React App快速启动开关切换React组件：

1

create-react-app toggleswitch

安装完成后，切换到新创建的目录并使用yarn start（或npm start）启动服务器，开发服务器将在http://localhost:3000启动。

接下来，在src目录中创建ToggleSwitch目录：

1

mkdir src/ToggleSwitch

在此目录中创建两个文件：ToggleSwitch.js和ToggleSwitch.scss：

1

touch ToggleSwitch.js ToggleSwitch.scss

最后，修改App.js：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import React from 'react';
import ToggleSwitch from './ToggleSwitch/ToggleSwitch'

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

第2步 - 标记结构

为React开关组件设置基本的HTML复选框输入表单元素：

1

<input type="checkbox" name="name" id="id" />

添加包围的<div>标签和下方的<label>标签创建标签文本"Toggle Me!"：

1
2
3
4
5
6

<div class="toggle-switch">
  <input type="checkbox" class="toggle-switch-checkbox" name="toggleSwitch" id="toggleSwitch" />
  <label class="toggle-switch-label" for="toggleSwitch">
    Toggle Me!
  </label>
</div>

也可以去掉标签文本，使用<label>标签本身来勾选或取消勾选复选框输入控件。在<label>标签内添加两个<span>标签来构建开关支架和切换开关：

1
2
3
4
5
6
7

<div class="toggle-switch">
  <input type="checkbox" class="toggle-switch-checkbox" name="toggleSwitch" id="toggleSwitch" />
  <label class="toggle-switch-label" for="toggleSwitch">
    <span class="toggle-switch-inner"></span>
    <span class="toggle-switch-switch"></span>
  </label>
</div>

第3步 - 转换为React组件

将HTML转换为React组件。从基本组件开始，使用类组件，然后转换为hooks，因为新手开发者在构建React开关按钮时更容易理解state而不是useState。

在步骤1创建的src/ToggleSwitch/ToggleSwitch.js文件中添加以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import React, { Component } from "react";

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          className="toggle-switch-checkbox"
          name="toggleSwitch"
          id="toggleSwitch"
        />
        <label className="toggle-switch-label" htmlFor="toggleSwitch">
          <span className="toggle-switch-inner" />
          <span className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

export default ToggleSwitch;

此时，由于id重复，无法在同一视图或页面上有多个开关滑块。虽然可以利用React的组件化方式，但我们将使用props动态填充值：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import React, { Component } from 'react';

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          className="toggle-switch-checkbox"
          name={this.props.Name}
          id={this.props.Name}
        />
        <label className="toggle-switch-label" htmlFor={this.props.Name}>
          <span className="toggle-switch-inner" />
          <span className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

export default ToggleSwitch;

this.props.Name将动态填充id、name和for（注意在React JS中是htmlFor）的值，以便可以向组件传递不同的值并在同一页面上有多个实例。

注意，<span>标签没有结束标签</span>，而是在开始标签中关闭，如<span />，这在JSX中完全没问题。

可以通过更新App.js来测试此组件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function App() {
  return (
    <>
      <ToggleSwitch Name='newsletter' />
      <ToggleSwitch Name='daily' />
      <ToggleSwitch Name='weekly' />
      <ToggleSwitch Name='monthly' />
    </>
  );
}

在http://localhost:3000/检查输出（可能使用浏览器开发工具）并确保一切正常工作。

第4步 - 样式和SCSS

对于Create React App使用SCSS，需要安装sass包：

1

yarn add node-sass

还需要将正确的文件导入组件：

1
2
3
4
5

// ToggleSwitch.js

import React, { Component } from 'react';
import './ToggleSwitch.scss';
...

现在开始样式设计。这是我们为React开关按钮样式设计的大致轮廓：

  • 默认情况下，开关仅宽75px并垂直对齐为inline-block，使其与文本内联且不会引起布局问题
  • 确保控件不可选择，用户无法拖放
  • 隐藏原始复选框输入
  • ::after和::before伪元素需要样式化并制作成元素以放入DOM并样式化
  • 添加一些CSS过渡以实现酷炫的动画效果

在SCSS中的实现如下。将以下内容添加到src/ToggleSwitch/ToggleSwitch.scss：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

.toggle-switch {
  position: relative;
  width: 75px;
  display: inline-block;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-align: left;
  &-checkbox {
    display: none;
  }
  &-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 0 solid #bbb;
    border-radius: 20px;
    margin: 0;
  }
  &-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
    &:before,
    &:after {
      display: block;
      float: left;
      width: 50%;
      height: 34px;
      padding: 0;
      line-height: 34px;
      font-size: 14px;
      color: white;
      font-weight: bold;
      box-sizing: border-box;
    }
    &:before {
      content: "Yes";
      text-transform: uppercase;
      padding-left: 10px;
      background-color: #f90;
      color: #fff;
    }
  }
  &-disabled {
    background-color: #ddd;
    cursor: not-allowed;
    &:before {
      background-color: #ddd;
      cursor: not-allowed;
    }
  }
  &-inner:after {
    content: "No";
    text-transform: uppercase;
    padding-right: 10px;
    background-color: #bbb;
    color: #fff;
    text-align: right;
  }
  &-switch {
    display: block;
    width: 24px;
    margin: 5px;
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 40px;
    border: 0 solid #bbb;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
  }
  &-checkbox:checked + &-label {
    .toggle-switch-inner {
      margin-left: 0;
    }
    .toggle-switch-switch {
      right: 0px;
    }
  }
}

现在，在http://localhost:3000/再次运行服务器，将看到四个样式精美的开关切换。尝试切换它们，应该都能工作。

动态标签

当前切换选项是硬编码的：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.toggle-switch {
  ...
  &-inner {
    ...
    &:before {
      content: "Yes";
      ...
    }
  }
  ...
  &-inner:after {
    content: "No";
    ...
  }
  ...
}

为了使组件更灵活，可以使用HTML5 data-attributes从控件动态获取这些值：

1
2
3
4
5
6
7
8

&:before {
  content: attr(data-yes);
  ...
}
&-inner:after {
  content: attr(data-no);
  ...
}

为测试硬编码数据属性，但将在最终版本中使其更灵活：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// ToggleSwitch.js

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        ...
        <label className="toggle-switch-label" htmlFor={this.props.Name}>
          <span className="toggle-switch-inner" data-yes="Ja" data-no="Nein"/>
          <span className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

第6步 - 创建较小版本组件

对于较小屏幕，使用没有文本的较小版本开关组件React是个好主意。添加样式，使用最小尺寸并移除文本：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.toggle-switch {
  ...
  &.small-switch {
    width: 40px;
    .toggle-switch-inner {
      &:after,
      &:before {
        content: "";
        height: 20px;
        line-height: 20px;
      }
    }
    .toggle-switch-switch {
      width: 16px;
      right: 20px;
      margin: 2px;
    }
  }
}

关于响应式设计，应该更改完整尺寸，因此使用CSS缩放函数。这里涵盖了所有基于Bootstrap的设备响应宽度：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.toggle-switch {
  ...
  @media screen and (max-width: 991px) {
    transform: scale(0.9);
  }
  @media screen and (max-width: 767px) {
    transform: scale(0.825);
  }
  @media screen and (max-width: 575px) {
    transform: scale(0.75);
  }
}

可以通过在ToggleSwitch.js中的父<div>元素添加small-switch类来测试这些更改：

1
2
3
4
5
6
7
8
9

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch small-switch">
        ...
      </div>
    );
  }
}

返回开发服务器并测试更改。

第6步 - SCSS中的主题化

由于可以在SCSS中使用变量，更容易添加对多颜色主题的支持。使用一些颜色主题并将所有原始颜色更改为变量。前三行是可配置的颜色集，帮助我们为主题化小控件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

// Colors
$label-colour: #bbb;
$disabled-colour: #ddd;
$toggle-colour: #2F855A;
$white: #fff;

// Styles
.toggle-switch {
  ...
  &-label {
    ...
    border: 0 solid $label-colour;
  }
  &-inner {
    ...
    &:before {
      ...
      background-color: $toggle-colour;
      color: $white;
    }
  }
  &-disabled {
    background-color: $disabled-colour;
    cursor: not-allowed;
    &:before {
      background-color: $disabled-colour;
      cursor: not-allowed;
    }
  }
  &-inner:after {
    ...
    background-color: $label-colour;
    color: $white;
  }
  &-switch {
    ...
    background: $white;
    border: 0 solid $label-colour;
  }
  ...
}

样式设计到此结束。现在添加一些交互性。

第7步 - 交互和JavaScript

注意：以下部分仅包含解释概念的演示代码。不应在此部分更新实际的ToggleSwitch组件。

我们的基本组件将是一个哑组件（或展示组件），其状态将由父组件或容器（如表单）控制。“受控"是什么意思？首先看看非受控版本：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React from 'react';

const ToggleSwitch = () => (
  <div>
    <input
      type="checkbox"
      className="toggle-switch-checkbox"
    />
  </div>
);

export default ToggleSwitch;

当用户与上述复选框输入交互时，它将自行在选中和未选中状态之间切换，无需编写任何JavaScript。HTML输入元素可以通过直接更新DOM来管理自己的内部状态。

然而，在React中，建议使用受控组件，如下例所示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import React from 'react';

const ToggleSwitch = ({checked}) => (
  <div>
    <input
      type="checkbox"
      className="toggle-switch-checkbox"
      checked={checked}
    />
  </div>
);

export default ToggleSwitch;

这里，React控制复选框输入的状态。与此输入的所有交互都必须通过虚拟DOM进行。如果尝试按原样与组件交互，什么也不会发生，因为尚未定义任何可以更改传入的checked prop值的JavaScript代码。

要修复此问题，可以传入onChange prop - 一个在单击复选框时调用的函数：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

import React from 'react';

const ToggleSwitch = ({checked, onChange}) => (
  <div>
    <input
      type="checkbox"
      className="toggle-switch-checkbox"
      checked={checked}
      onChange={e => onChange(e.target.checked)}
    />
  </div>
);

export default ToggleSwitch;

现在，复选框输入是交互式的。用户可以像以前一样切换组件"开"和"关”。这里唯一的区别是状态由React控制，而不是之前的非受控版本。这使我们能够通过JavaScript轻松访问组件在任何给定时间的状态。在声明组件时也可以轻松定义初始值。

现在，看看如何在ToggleSwitch组件中使用它。以下是简化的基于类的示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import React, { Component } from 'react';

class Form extends Component {
  state = { checked : false }

  onChange = newValue => {
    this.setState({ checked: newValue });
  }

  render() {
    return (
      <ToggleSwitch id="toggleSwitch" checked={this.checked} onChange={this.onChange} />
    );
  }
}

export default Form;

现在使用hooks将基于类的组件转换为功能组件：

1
2
3
4
5
6
7
8
9

import React, { useState } from 'react';

export default function Form() {
  let [checked, setChecked] = useState(false);

  return (
    <ToggleSwitch id="toggleSwitch" checked={checked} onChange={setChecked} />
  )
}

可以看到，使用功能组件和hooks创建方法大大减少了行数。

第8步 - 完成ToggleSwitch组件

现在回到ToggleSwitch组件。需要以下props：

  • id（必需）：将传递给复选框输入控件的ID。没有它，组件将不会渲染
  • checked（必需）：将保存当前状态，这是一个布尔值
  • onChange（必需）：当输入的onChange事件处理程序触发时将调用此函数
  • name（可选）：这将是复选框输入的标签文本，但通常不会使用它
  • small（可选）：此布尔值以小型模式渲染开关切换，不渲染文本
  • optionLabels（可选）：如果不使用控件的small版本，可能需要将其作为两个值的数组传递给开关切换，表示True和False的文本。例如Text={["Yes", "No"]}
  • disabled（可选）：这将直接传递给<input type="checkbox" />

当不使用small版本时，将使用以下optionLabels文本作为默认值：

1
2
3
4

// 设置渲染的optionLabels
ToggleSwitch.defaultProps = {
  optionLabels: ["Yes", "No"],
};

由于大多数props必须由用户设置，且不能使用任意值，最好在未传递必需props时停止渲染。可以使用简单的JavaScriptif语句或使用? :的三元运算符或短路的&&：

1
2
3

{this.props.id ? (
  <!-- 显示控件 -->
) : null}

随着应用增长，可以通过类型检查捕获许多错误。React有一些内置的类型检查能力。要对组件的props运行类型检查，可以分配特殊的propTypes属性。可以使用React的PropType库（一个单独导出各种验证器的库，用于确保接收的数据有效）来强制执行上述props列表。

可以这样安装：

1

yarn add prop-types

然后，使用以下方式导入PropTypes库：

1
2

// ToggleSwitch.js
import PropTypes from "prop-types";

将以以下方式定义PropTypes：

1
2
3
4
5
6
7
8
9

ToggleSwitch.propTypes = {
  id: PropTypes.string.isRequired,
  checked: PropTypes.bool.isRequired,
  onChange: PropTypes.func.isRequired,
  name: PropTypes.string,
  optionLabels: PropTypes.array,
  small: PropTypes.bool,
  disabled: PropTypes.bool
};

解释说明：

  • PropTypes.string.isRequired：这是一个字符串值，是必需和强制的
  • PropTypes.string：这是一个字符串值，但不是强制的
  • PropTypes.func：此prop接受函数作为值，但不是强制的
  • PropTypes.bool：这是一个布尔值，但不是强制的
  • PropTypes.array：这是一个数组值，但不是强制的

现在，可以继续ToggleSwitch组件。将src/ToggleSwitch/ToggleSwitch.js的内容替换为以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React from "react";
import PropTypes from "prop-types";
import './ToggleSwitch.scss';

/*
Toggle Switch组件
注意：id、checked和onChange是ToggleSwitch组件功能所必需的。
props name、small、disabled和optionLabels是可选的。
用法：<ToggleSwitch id="id" checked={value} onChange={checked => setValue(checked)}} />
*/

const
comments powered by Disqus
© 2020 - 2025 qife
使用 Hugo 构建
主题 Stack 由 Jimmy 设计
本站总访问量次 本站访客数人次