有没有办法将函数调用的返回传播到 jsx 中的 props 中？

Question

我想不出办法，但我想要的是：

<ColumnDef key="label" ...createCommonColumnProps.call(this, {somestuff}) />
<ColumnDef key="count" ...createCommonColumnProps.call(this, {someOtherStuff}) />
<ColumnDef key="value" ...createCommonColumnProps.call(this, {yetOtherstuff}) />

我希望它非常简单，我只是个白痴，但如果不创建变量，我就找不到方法

<ColumnDef key="label" {...column1} />
<ColumnDef key="count" {...column2} />
<ColumnDef key="value" {...column3} />

大约有5个props，其中一些受到传递给函数的对象的影响。

当我在 chrome devtools 控制台中尝试这个（只是 js 部分，而不是 jsx 部分）时，我看到了这样的事情：

> function a() {
   return {a:1, b:2}
 }
undefined
> y = {... a()}
VM341:1 Uncaught SyntaxError: Unexpected token ...
> x = ... a()
VM368:1 Uncaught SyntaxError: Unexpected token ...
> x = {a:1,b:2}
Object {a: 1, b: 2}
> y = {...x}
VM888:1 Uncaught SyntaxError: Unexpected token ...

Answer 1

JSX 对象扩展语法如下：

{...<expression>}

expression 返回一个对象的引用。

所以你的情况是

<ColumnDef key="label" {... createCommonColumnProps.call(this, {somestuff})} />

UPD 以反映您的问题更新：

当我在 chrome devtools 控制台中尝试这个（只是 js 部分，而不是 jsx 部分）时，我看到了这样的事情：

发生这种情况是因为尽管 JSX 对象扩展语法看起来类似于非标准化但 ES 对象扩展语法 - 它们不可互换（并且 chrome 尚不支持后者）。

所以，只要完全按照我在上面的示例中演示的方式使用它即可。