我无法想出办法,但我想要的是:
<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个道具,其中一些受传递给该功能的对象的影响。
当我在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 ...
JSX对象扩展语法如下所示:
{...<expression>}
其中expression
返回对象的引用。
所以在你的情况下它会
<ColumnDef key="label" {... createCommonColumnProps.call(this, {somestuff})} />
UPD反映您的问题更新:
当我在chrome devtools控制台(只是js部分,而不是jsx部分)中尝试这个时,我看到的是这样的事情:
这种情况正在发生,因为即使JSX对象扩展语法看起来类似于非标准化的ES对象扩展语法 - 它们也不可互换(并且chrome还不支持后者)。
所以,就像我在上面的例子中演示的那样使用它。