在这段代码中，这些偏执是必要的吗？

Question

我大致了解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对象。如果是这样的话，那么括号可能是用来从fat-arrow函数隐式返回它们的。

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