内联和在不同行中编写React组件的打开和关闭之间有什么区别？

Question

当我使用Material-ui创建Multiselect下拉列表时，我陷入了奇怪的境地。 如果我提供这样的选择列表项：

let rows = this.props.masterList.map(item => (
  <MenuItem key={item.key} value={item.key}> {item.value} </MenuItem>
))

它将props.children元素显示为3个项目的数组

在文本后的输出带有逗号：

如果我用这样的新行写相同的代码：

let rows = this.props.masterList.map(item => (
  <MenuItem key={item.key} value={item.key}> 
    {item.value} 
  </MenuItem>
))

它将props.children元素显示为单个值

在这种情况下，输出正常：

有人可以告诉我这两者之间的区别吗？

谢谢

Answer 1

删除{item.value}之前和之后的多余空间。