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>
)

Answer 1

<强> Rule

我们可以使用{}。
在JSX中放置任何表达式 not语句

它不是有效的语法，我们不能直接在JSX中使用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;
    } 
}

或者使用ternary operator进行条件渲染，或者也可以使用IIFE。

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;
  }
})()}

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"));

Answer 4

您可以使用普通对象代替switch：

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

JSX内部的切换案例不起作用：ReactJS

4 个答案: