javascript - 内联和不同行编写 React 组件打开和关闭有什么区别？

Question

当我使用 Material-ui 创建多选下拉菜单时，我遇到了一些奇怪的事情。如果我提供这样的选择列表项:

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} 前后的多余空格即可。