reactjs - JSX 内的开关盒不工作 : ReactJS

Question

在我的 reactjs 组件中 - 在渲染中，我想创建一个 switch case，它将使用基于 switch case 的特定组件。但这里有一个语法错误。

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

意外 token (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>
)

Answer 1

<强> Rule :

We can put any expression not statement inside JSX by using {}.

这不是有效的语法，我们不能直接在 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 .