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解释器会这样理解（在;之后注意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来说不是问题

反应JSX编辑风格

1 个答案: