在这个 React 代码段中是否需要括号？答案

【问题标题】：Are the parantheses necessary here in this React snippet?在这个 React 代码段中是否需要括号？
【发布时间】：2021-03-21 14:39:00
【问题描述】：

我大致了解 ES6 函数箭头的工作原理。我也明白，有时括号可以用来隐式返回一个对象。但是，就 React/JSX 而言，下面的括号是必须的吗？

class Contactlist extends React.Component {

    render() {

    const people = [
      { name: 'Tyler' },
      { name: 'Karen' },
      { name: 'Richard' }
    ]

    return <ol>
      { 
        people.map(
            // are the parentheses necessary here??
            person => (<li key={person.name}>{person.name}</li>)
        )
      }
    </ol>

    }
}

或者可以简单地执行以下操作？

...
return <ol>
  {
      people.map(
          person => <li key={person.name}>{person.name}</li>
      )
  }
</ol>
...

所以，我想我真正应该问的是 jsx 元素是否被视为 js 对象。如果是这样，那么括号可能被用于从粗箭头函数隐式返回它们。

【问题讨论】：

从技术上讲，这与 React 无关，您要询问的代码只是 vanilla Javascript - 一个基本的地图功能。规则是：只有一个参数，括号是可选的。有 2 个或更多，您需要它们
两者都是正确的。理想情况下，您应该有一个标准的（项目范围的）linter 来为您修复这些样式并使其保持一致。使用 Prettier 或类似的东西。它将确保代码样式保持一致，而不受开发人员个人喜好的影响
@Jayce444 谢谢...但我说的是函数体，而不是参数。在这种情况下，我对 React 和 JSX 还很陌生，因此不确定这些 JSX 元素是否被视为 js 对象。所以，我的问题实际上回到了 React/JSX。
@Nishant 非常感谢您抽出宝贵时间。但是，我的问题与代码格式无关。此外，linter 将帮助我解决语法错误，而不是逻辑错误。很多时候，代码在语法上是好的，但在逻辑上它是有缺陷的......在这里，由于我对 React/JSX 的做事方式并不完全熟悉，我不确定是否有比所看到的更多的东西.
这能回答你的问题吗？ Why is it best practice to surround JSX assigned to variables with parenthesis?

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

在这种情况下不使用括号是绝对可以的。

return <ol>
  {
      people.map(
          person => <li key={person.name}>{person.name}</li>
      )
  }
</ol>

一个好的做法是只在多行 JSX 周围使用括号。因此，在您的情况下，您需要将 JSX 包含在括号中的 return 中，并且您可以跳过将 JSX 包含在 map 函数中的括号中。

return (
    <ol>
        {
            people.map(
               person => <li key={person.name}>{person.name}</li>
            )
        }
    </ol>
);

【讨论】：