学习React组件中的Switch case表达式

在本教程中，我们将学习React组件中的Switch case表达式。它包括如何根据switch case表达式来加载组件和渲染。

一般来说，Switch表达式的语法是这样的

switch(expression or variable) {
    case case1:
        return "case1"
    case case2:
        return "case2"
    case case3:
        return "case3"
    default:
        return "default"
}

表达式是一个被评估为值的javascript。值是一个变量值。

它检查匹配的情况并返回包裹在返回语句中的代码。返回语句可以是任何字符串或反应成分。

当没有找到匹配的情况时，默认调用。

类组件中的React switch case示例

Switch expressions 在jsx的render函数中从来没有使用过return表达式。 但是，我们可以在一个单独的函数中或者在render函数中使用switch表达式来获得返回的匹配案例。

在下面的例子中，在一个单独的函数中写入switch expression ，返回字符串，或者你可以写成返回组件。

Switch expression 检查组件的属性并返回匹配的情况。

返回的react组件调用这个函数。

在一个单独的函数中使用react switch表达式:

import React, { Component } from 'react';

class ClassComponent extends Component {
    loadComponent() {
        switch (this.props.number) {
            case '1':
                return "One";
            case '2':
                return "two";
            default:
                return "default"
        }
    }
    render() {
        return (
            <div>
                {this.loadComponent()}

            </div>
        );
    }
}

export default ClassComponent;

react switch表达式在一个渲染函数里面"

在这个例子中，Switch表达式被用在一个渲染函数里面，但不在返回语句中。 下面是一个例子

import React, { Component } from 'react';

class ClassComponent extends Component {

    render() {
        switch (this.props.number) {
            case '1':
                return "One";
            case '2':
                return "two";
            default:
                return "default"
        }
        return (
            <div>
                {this.loadComponent()}

            </div>
        );
    }
}

export default ClassComponent;

通过传递number 属性来调用这个函数classcomponent

import './App.css';
import ClassComponent from './ClassComponent';

function App() {

  return (
    <div className="App">

      <ClassComponent number="ten"></ClassComponent>

    </div>
  );
}


export default App;

如何在React功能组件中使用switch case示例

这显示了如何在Function组件的例子中使用switch case。

创建了一个单独的函数来处理switch case，以返回匹配的case执行。

import React from 'react';

const MyFunction = (number) => {

    return (
        <div>
            {loadComponent(number)}
        </div>
    )
}
export default MyFunction

function loadComponent(number) {
    switch (number) {
        case '1':
            return "One";
        case '2':
            return "two";
        default:
            return "default"
    }
}

总结

总而言之，最好避免使用switch-case表达式。如果你仍然想使用它，请编写一个单独的函数并在类和功能组件中调用这个函数。