无论如何将函数调用的 return 传播到 jsx 中的道具中?
Is there anyway to spread the return of a function call into props in jsx?
我想不出办法,但我想要的是:
<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 ...
JSX 对象扩展语法如下:
{...<expression>}
其中 expression
returns 对对象的引用。
所以你的情况是
<ColumnDef key="label" {... createCommonColumnProps.call(this, {somestuff})} />
UPD 以反映您的问题更新:
When I'm trying this in the chrome devtools console (just the js part, not the jsx part), I'm seeing things like this:
这是因为尽管 JSX 对象扩展语法看起来类似于非标准化但 ES 对象扩展语法 - 它们不可互换(并且 chrome 尚不支持后者)。
因此,请完全按照我在上面的示例中演示的方式使用它。
我想不出办法,但我想要的是:
<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 ...
JSX 对象扩展语法如下:
{...<expression>}
其中 expression
returns 对对象的引用。
所以你的情况是
<ColumnDef key="label" {... createCommonColumnProps.call(this, {somestuff})} />
UPD 以反映您的问题更新:
When I'm trying this in the chrome devtools console (just the js part, not the jsx part), I'm seeing things like this:
这是因为尽管 JSX 对象扩展语法看起来类似于非标准化但 ES 对象扩展语法 - 它们不可互换(并且 chrome 尚不支持后者)。
因此,请完全按照我在上面的示例中演示的方式使用它。