Switch组件的使用

已于 2022-05-19 11:19:59 修改
阅读量1.2k 收藏
点赞数
分类专栏： React17/18 文章标签： Switch组件 react
于 2022-05-19 11:18:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/124858788
版权

文章目录

基本路由的使用

在这里插入图片描述

本篇的vue项目，代码涉及的主要文件有：

  1. 模板文件index.html
  2. 入口文件index.js
  3. 入口组件App.js
  4. 路由组件Home：pages/Home/index.jsx
  5. 路由组件About：pages/About/index.jsx

模板文件index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

入口组件App.js

import React, { Component } from 'react'
import {NavLink,Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h2>Vue Router Demo</h2></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Route path="/about" component={About}></Route>
                <Route path="/home" component={Home}></Route>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

pages/Home/index.jsx（Home组件）

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
        <h2>我是Home的内容</h2>
    )
  }
}

pages/About/index.jsx（About组件）

import React, { Component } from 'react'

export default class About extends Component {
  render() {
    return (
        <h2>我是About的内容</h2>
    )
  }
}

Switch组件的使用

将基于以上路由基础实例，来学习Switch组件。

问题描述

  1. 新建路由组件：Business组件，pages/Business/index.jsx。
import React, { Component } from 'react'

export default class Business extends Component {
  render() {
    return (
      <div>我是Business的内容</div>
    )
  }
}
  1. 修改App.js。注册路由时，
    一个路由，path="/home"时，component设置为Home组件；
    另一个路由，path="/home"时，component设置为Business组件。

import React, { Component } from 'react'
import {NavLink,Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Business from "./pages/Business";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h2>Vue Router Demo</h2></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Route path="/about" component={About}></Route>
                <Route path="/home" component={Home}></Route>
                <Route path="/home" component={Business}></Route>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
  1. 启动应用，查看当导航切换到home时，会展示什么内容。
    要么，只展示Home组件；
    要么，只展示Business组件；
    要么，既展示Home组件，又展示Business组件；（✔）
    要么，哪个组件都不展示。
    在这里插入图片描述

也就是说，当出现以下情况时，React路由会同时展示Home组件、Business组件的内容。

<Route path="/home" component={Home}></Route>
<Route path="/home" component={Business}></Route>

使用Switch组件

针对以上问题，我们现在使用Switch组件将所有的Route组件包裹起来，修改后的App.js如下：

import React, { Component } from 'react'
import {NavLink,Switch,Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Business from "./pages/Business";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h2>Vue Router Demo</h2></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Switch>
                  <Route path="/about" component={About}></Route>
                  <Route path="/home" component={Home}></Route>
                  <Route path="/home" component={Business}></Route>
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

在这里插入图片描述
可以看到，使用Switch组件包裹所有Route组件后，当出现同一个path对应多个不同组件的情况时，只会展示第一个与path匹配的组件。即，Switch组件帮助实现了路由的单一匹配。

richest_qi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序switch组件使用详解
08-28
主要为大家详细介绍了微信小程序switch组件的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3 组件篇 Switch
秋来九月八
10-02 5817
Switch 开关组件经常出现在网页中，比如视频里面的弹幕开关，某一项功能是否开启等。 通常一个switch开关组件需要实现的功能如下 1. 能够流畅的切换开关。 2. 需要能及时反馈开关的状态。 3. 能够出现提示的文字，在开关开启或关闭的时候 4. 最好能够自适应宽度，以便文字的长度能尽可能的满足 5. disabled状态需要实现
element-ui switch 组件源码分享
qq_37309987的博客
03-29 670
2.5 inactive-icon-class 属性，switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text，类型 string，无默认值。2.9 inactive-value 属性，switch 关闭时的值，类型 boolean / string / number，默认 false。2.8 active-value 属性，switch 打开时的值，类型 boolean / string / number，默认 true。4.1 focus 事件，使 Switch 获取焦点。
HarmonyOS实战开发-switch、chart组件的使用
最新发布
2401_82546228的博客
03-31 580
本篇Codelab基于switch组件和chart组件，实现线形图、占比图、柱状图，并通过switch切换chart组件数据的动静态显示。要求实现以下功能：
dolphinscheduler的switch组件
chimchim66的博客
07-03 1270
Switch 是一个条件判断节点，依据全局变量的值和用户所编写的表达式判断结果执行对应分支。注意使用 javax.script.ScriptEngine.eval 执行表达式。需要先配置前置任务；才能在条件中引用上游传递过来的参数值；配置好跟下游任务的依赖关系，符合条件的分支流转才能选到下游任务。
uniapp中组件库丰富的Switch 开关选择器使用方法
精通前端技术，了解后端接口
01-03 3158
设置size属性，可以让您自定义switch的尺寸，单位为px设置属性，可以让您自定义switch同时设置和属性，可以让您自定义switch的样式，同样支持多种设置方式
视图组件--Switch开关按钮
技术应让更广泛的人群流入到实际产品开发中才是正统
09-19 122
要在 Android 应用中创建开关按钮（Switch），你可以使用Switch视图组件。上述示例中，我们创建了一个简单的 Switch，设置了其 ID 和显示的文本。onCreate这个监听器会在用户切换开关状态时触发，根据isChecked参数来判断开关的状态。你可以在相应的条件下执行你的操作。这些步骤可以帮助你创建和操作开关按钮，以实现在应用程序中让用户切换某些功能或选项的功能。根据需要，你可以根据用户的选择执行不同的操作。
手撸一个Switch开关组件
发果叁
02-21 2879
手撸系列又来了，这次咱们来撸一个Switch开关组件，废话不多说，咱们立刻发车。好啦，今天的手撸系列就完事了，关于switch开关组件有更好的想法的话，欢迎评论区里讨论，那么下次再见喽为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
android使用switch组件
02-03
android使用switch组件
bootstrap switch开关组件使用方法详解
08-29
主要为大家详细介绍了bootstrap switch开关组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue自定义switch开关组件,实现样式可自行更改
10-16
今天小编就为大家分享一篇vue自定义switch开关组件,实现样式可自行更改，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
dolphinscheduler2.0.5 HTTP任务类型改造
04-17 5834
背景 改造思路 方案一 方案二 涉及代码 动态获取查询参数 签名栏位
dolphinscheduler 2.0.6 任务之间的参数传递及Java脚本引擎
12-01 1826
Condition节点主要依据上游节点的执行状态（成功、失败）执行对应分支。Switch节点主要依据全局变量的值和用户所编写的表达式判断结果执行对应分支Switch节点官网描述上游任务传递给下游任务官网。
React Native-14：开关切换组件-Switch
臧小川的博客
11-12 1068
import React, { useState } from 'react' import { View, Text, StyleSheet, Switch // 开关切换组件 } from 'react-native' const App = () => { const label = { false: '关', true: '开' } const [switchValue, SetSwitchValue] = useState(true
DolphinScheduler技术分析（十）
Choozz1的博客
12-12 800
2021SC@SDUSC
DolphinScheduler实现隔几天调度
Brother_ning的博客
02-04 647
olphinscheduler（海豚）定时器模块-定时调度时每3秒|每3分钟|每3天这种定时，不能够跨分钟，跨小时，跨月，每次跨月等都会从每个月的第1天（第几天开始可以设定）开始重新计时。为解决此问题，可以采用整天运行，并使用dolphinscheduler自带的switch判断模块组合实现每隔几天的需求。
switch-前端资源代理工具
gq0811的博客
05-25 367
https://chrome.google.com/webstore/detail/xswitch/idkjhjggpffolpidfkikidcokdkdaogg​ ​​
06 Qt自绘组件：Switch动画开关组件
进击的程序员
02-24 2551
开关控件（Switch Control）不在Qt基本组件库里面，但是在我们的日常业务开发中极其常见。开关控件通常用于在用户界面中表示两种状态（打开和关闭、开和关等），用户可以通过点击或拖动来切换状态。然而， 如果单纯的根据两种状态进行Icon的切换又略显单调些，所以本篇想向大家分享的是具有开关动画效果的Switch按钮组件！既聊代码也说思路，我们开始今天的动画Swich动画开关组件的分享！1.为了沿用Qt 按钮组件的基本功能接口，所以我们继承的基类应该选择。
switch组件的使用方法
05-18
switch组件是一个常见的开关控制组件，在许多UI框架中都有实现。以下是一个简单的使用方法： 1. 在HTML文件中添加switch组件的标签，例如： ...通过以上步骤，你就可以在你的页面中使用一个简单的switch组件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值