为什么这段 React 代码末尾有一个逗号“,”

Question

初学者问题如图所示逗号？

更新
做了一些测试，Eslint 也推荐了它，但通常它是用来分离值的，但他的只有一个 value/statement

Answer 1

在对象文字中，逗号将属性与下一个分隔开。您必须在每个属性之后拥有这些，最后一个除外。

const example = {
  foo: 1,
  bar: 2,
  baz: 3
};

也允许在最后一项之后使用“尾随逗号”。有些人更喜欢将其也放在最后一行的样式。

const example = {
  foo: 1,
  bar: 2,
  baz: 3,
};

您的代码在 single-property 对象的最后一行显示了一个逗号示例。

Answer 2

这是 Prettier 的 trailing commas 规则。

Default value changed from none to es5 in v2.0.0

Print trailing commas wherever possible when multi-line. (A single-line array, for example, never gets trailing commas.)

Valid options:

"es5" - Trailing commas where valid in ES5 (objects, arrays, etc.)

"none" - No trailing commas.

"all" - Trailing commas wherever possible (including function arguments). This requires node 8 or a transform.

传递给状态更新函数的对象是一个multi-line对象文字

{
  updateCount: updateCount + 1,
}

但是当写成一行时可能不需要尾随逗号

{ updateCount: updateCount + 1 }

注意：根据其他配置的 prettier/eslint 规则，即使你写了一个 single-line 对象文字，它仍然可以是 auto-formatted 到 multi-line 对象，即行字符长度等...

意思是，像这样简单的一行

this.setState({ updateCount: updateCount + 1 });

根据缩进和其他样式配置，可以自动格式化为

this.setState({
  updateCount: updateCount + 1,
});

为什么这段 React 代码末尾有一个逗号“,”

Why is there a comma "," at the end in this React code

comma

reactjs