如何在JSX中使用switch case：ReactJS

Question

我在我的React应用程序中导入了四个组件。如何根据属性条件地渲染其中一个组件？这就是我要做的事情。

<ReactSVGPanZoom
      //switch(this.props.Selected){
      // case '1': render <ComponentOne/>; break;
      // case '2': render <ComponentTwo/>; break;
      // case '3': render <ComponentThree/>; break;
      // case '4': render <ComponentFour/>; break;
      // default: render <ComponentOne/>
        }
</ReactSVGPanZoom>

- Vishnu

Answer 1

直接这样做是不被允许的，因为我们不能在JSX内部放置任何语句。您可以将代码（开关逻辑）放入一个函数中并调用该函数，并从其中返回正确的组件。

查看文档：在JSX中嵌入表达式

像这样：

<ReactSVGPanZoom
    {this.renderComponent()}
</ReactSVGPanZoom>


renderComponent(){
    switch(this.props.Selected){
        case '1': return <ComponentOne/>;
        case '2': return <ComponentTwo/>;
        case '3': return <ComponentThree/>;
        case '4': return <ComponentFour/>;
        default: return <ComponentOne/>
    }
}

建议：

return后面不需要加上break。

- Mayank Shukla

Answer 2

您可以从开关中获取组件（无论是在函数中还是在render中），并将其作为ReactSvgPanZoom的子元素进行渲染，如下所示：

getComponent(){
  switch(this.props.Selected){
    case '1': 
      return <ComponentOne/>;
    case '2': 
      return <ComponentTwo/>; 
    // .. etc
    default: 
      return <ComponentOne/>
  }
}
render() {
    return (<ReactSVGPanZoom>
        {this.getComponent()}
      </ReactSVGPanZoom>);
  }

- dashton

Answer 3

您可以创建一个const并在需要时使用：

import React from "react";

export const myComponents = {
  Component1: <Component1 />,
  Component2: <Component2 />,
  Component3: <Component3 />,
  Component4: <Component4 />,
}

现在在您的主组件中：

import React from "react";
import {myComponents} from "./const";

...
render() {
  return (
    <div>
      {myComponents[this.props.Selected]}
    </div>
  )
}

https://codesandbox.io/s/mzn5x725vx

- max li

---

我一直在尝试寻找更好的解决方案。但是意识到我已经在使用@max li建议的东西。因此，我认为这是上述问题的最佳答案。 - vik

Answer 4

render() {
  return (
    <div>
      {
        (() => {
          switch(this.props.value) {
            case 1:
              return this.myComponentMethod();
              break;
            case 2: 
              return () => { return <AnotherComponent/> }; 
              break;
            case 3:
              return <div>1</div>; 
            break;
            default: return null; break;
          }
        }).call(this)
      }
    </div>
  )
}

- Sasha Kos

---

不确定这个解决方案是否可行，基本上它将创建一个新函数并在每次渲染组件时自动调用它，这通常是不希望发生的。 - GibboK

将开关添加到专用函数中。 - GibboK

这实际上不是一个真实的例子，专用函数绝对是最好的解决方案。我的代码只是以一种花哨的方式展示了它是可能的。 - Sasha Kos

Answer 5

有一个专门用于此目的的构造： Do Expression

您可以像这样使用它：

<ReactSVGPanZoom
    {do {
        switch (this.props.Selected) {
            case '1': <ComponentOne/>; break;
            case '2': <ComponentTwo/>; break;
            case '3': <ComponentThree/>; break;
            case '4': <ComponentFour/>; break;
            default: <ComponentOne/>;
        }
    }}
</ReactSVGPanZoom>

请记住，在do表达式中不使用return，并且在do表达式中的最后一个表达式将是返回的值。因此，即使在switch之后放置分号也会破坏事情。

- Sassan

Answer 6

export default function FunctionName(props) {
  return (
    <div>
      {
        (() => {
          switch (props.value) {
            case 1:
              return <p>Case 1<;
              break;
            case 2:
              return () => { return <AnotherComponent /> };
              break;
            case 3:
              return <div>1</div>;
              break;
            default: return null; break;
          }
        })
      }
    </div>
  )
}

- kartik tyagi

Answer 7

你可以像这样使用数组索引作为依赖项：

<Box>
    {
      {
        0: <ComponentOne/>,
        1: <ComponentTwo/>,
        2: <ComponentThree/>,
      }[arrayIndex]         // arrayIndex as dependency
    }
</Box>

- Java bee