switch 语句 React 中的意外标记“switch”

Question

我从以下代码中收到意外令牌 switch 错误：

const bodyelements = () => (
    body.map(item => (
      switch (item?.typename) {
        case 'ArticleBodyText':
          return <TextBlock dangerouslySetInnerHTML={{ __html: item?.primary?.[0].text }} />
        case 'ArticleBodyImage':
          return <ArticleBodyImage item={item} />
        default:
          break;
      )}
  )

我已经尝试在 Whosebug 上查找错误，但我看到的修复不适用于我的代码。有人知道怎么回事吗？

编辑：

我改成了这个

const bodyelements = () => {
    body.map(item => (
      switch (item?.__typename) {
        case 'ArticleBodyText':
          return <TextBlock dangerouslySetInnerHTML={{ __html: item?.primary?.[0].text }} />
          break;
        case 'ArticleBodyImage':
          return <ArticleBodyImage item={item} />
          break;
        default:
          break;
      )}
      }

但我仍然遇到同样的错误

Answer 1

短函数语法有两种选择：

一个使用表达式和returns它的结果：
```
() => ( some_expression_with_a_result )
```
一个语句块用于一个或多个语句：
```
() => { statement1; statement2 }
```

switch是一个语句，所以你需要使用块变体。

Answer 2

您的代码中存在这些问题

如果要渲染，每个 switch case 都必须 return 东西。
您的 switch 语句应该用块引号引起来。
您应该为地图中的项目添加 return 语句。

试试这个

const bodyelements = () => {
    return ['ArticleBodyText', 'ArticleBodyImage'].map(item => {
        switch (item) {
            case 'ArticleBodyText':
                return <div>1</div>;
            case 'ArticleBodyImage':
                return <div>2</div>;
            default:
                return null;
        }
    })
}

switch 语句 React 中的意外标记“switch”

Unexpected token `switch` in switch statement React

switch-statement

reactjs