React JSX编辑风格

用户名

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

工作示例:

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语法应该这么敏感还是我遗漏了其他东西?

Oleksandr T.

在您的示例中,结果将是

[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则不存在此问题

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章