javascript - React JSX 编辑风格

Question

在我发现这个之前，我花了几个小时试图了解是什么破坏了我的示例应用程序:

工作示例:

let cards = this.props.cards.map(
  (card) => {
    return <Card id = {card.id}
                 title = {card.title}
                 description = {card.description}
                 color = {card.color}
                 tasks = {card.tasks} />
  });

损坏的例子:

let cards = this.props.cards.map(
  (card) => {
    return 
    <Card id = {card.id}
          title = {card.title}
          description = {card.description}
          color = {card.color}
          tasks = {card.tasks} />
  });

JSX 语法应该这么敏感还是我遗漏了什么？

Answer 1

在你的坏例子中结果将是

[undefined, ...., undefined]

因为JS解释器是这样理解的(注意 ; after return)，

let cards = this.props.cards.map(
  (card) => {
    return;

    <Card id = {card.id}
          title = {card.title}
          description = {card.description}
          color = {card.color}
          tasks = {card.tasks} />
  });

如果你在 return 之后添加新行 - JS 解释器自动插入分号，这不是 JSX 的问题