JSX内部的switch case无法工作：ReactJS

Question

在我的reactjs组件中，在渲染时，我想创建一个开关语句，根据开关条件使用特定的组件。但这里有一个语法错误。

我应该将其作为组件内部的函数吗？

意外的令牌（190:32）

  188 | 
  189 |   {
> 190 |     return (
      |     ^

以下是组件的完整返回函数：

return (
    <div className="Page">
        ....
    {
        elements.map(function(element, index){
            return (
                <Col xs={24} sm={element["grid-width"]*2} md={element["grid-width"]} key={index} className="element-container">
                  .....
                      <div className="contents">
                        {
                          return (
                            switch (element.type) { 
                              case 'we-are-always-here-to-help':
                                sss
                                break;
                              case 'call-us-when-you-are-having-difficulties':
                                xx
                                break;
                              default: 
                            }
                          )
                        }
                      </div>
                </Col>
            )
        })
    }
    </div>
)

- The Old County

---

你能发布完整的组件代码吗？ - abdul

你的代码很难读懂。可能需要使用 switch case，每个 case 都返回一些内容，而不是相反的方式。 - cbll

Answer 1

规则：

我们可以使用{}，在JSX中嵌入任何表达式而不是语句。

这不是有效的语法，我们不能直接在JSX中使用switch语句或任何其他语句。

解决方案：

将所有switch部分逻辑放在一个函数中，在JSX中调用该函数并返回结果。

写成这样：

<div>
    {this._switchPart(element.type)}
</div>

请将_switchPart的定义修改为以下内容：

_switchPart(type){
    switch (type) {
       case 'we-are-always-here-to-help': return sss;

       case 'call-us-when-you-are-having-difficulties': return xx;

       default: return xy;
    } 
}

您可以使用三元运算符进行条件渲染，或者您也可以使用IIFE（立即调用函数表达式）。

- Mayank Shukla

Answer 2

您可以像这样使用IIFE：

{(() => {
  switch (element.type) {
    case 'we-are-always-here-to-help':
      return sss;
      break;
    case 'call-us-when-you-are-having-difficulties':
      return xx;
      break;
    default:
      return dd;
  }
})()}

- MrCode

Answer 3

这个问题的工作示例：

class Example extends React.Component {
    constructor () {
        super();
    }

    renderView() {
        switch (this.props.viewName) {
            case 'index': {
                return (<div>Index</div>);
            }

            default: {
                return <div>404 Error</div>;
            }
        }
    }

    render () {
        return (<div>{this.renderView()}</div>);
    }
};

ReactDOM.render(<Example viewName="index" />, document.getElementById("root"));

- chuve

Answer 4

你可以使用普通对象代替switch:

<div className="contents">
  {{
    'we-are-always-here-to-help': sss,
    'call-us-when-you-are-having-difficulties': xx,
  }[element.type]}
</div>

- Do Async