reactjs - 当属性具有相同名称时，是否有 JSX 快捷方式为该属性分配值？

Question

如果我正在编写一些 JSX，是否有这样的快捷方式:

<MyComponent myProperty={myProperty} />

这样我就不必编写 myProperty 两次？

我基本上是在寻找与 ES2015 及更高版本中的文字对象速记语法等效的 JSX。

Answer 1

没有这样的等价物。原因是 JSX 模仿 HTML 语法，并且对于 HTML，以下两者都具有含义:

// a property without value
<MyComponent myProperty />
// a property with a value
<MyComponent myProperty={myProperty} />

因此不能引入简写语法。

你可以使用纯 JS:

 React.createElement("MyComponent", { myProperty });

或者，您可以将所有属性作为 JS 对象传递:

<MyComponent {...{ myProperty }} />

我相信两者都会降低可读性。