从地图返回的react对象传播(ES6)

IT技术 reactjs ecmascript-6
2021-05-07 16:21:56

为什么这是有效的:

return elements.map((e)=> {return Object.assign({}, e, {selected:true})});

但这不会:

return elements.map((e)=> {...e, {selected: true}});

?

ES6 / Babel / React 的新手,请怜悯。

更新:移至此后(如建议):

return elements.map(e => ({...e, selected: true }));

得到这个错误: 意外的标记

尽管传播在项目的其他地方起作用:

        return [
            ...state,
            element(undefined, action)
        ]
2个回答

来自箭头函数的对象的隐式返回应该包含在括号中,以便解释器知道它不是块。

所以 return elements.map(e => ({...e, selected: true }));

还修复了所选属性的语法,它不应该像 azium 指出的那样用括号括起来。

请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

您意外的令牌错误可能是由于 babel 不支持建议的object spread数组展开是 es6。使用以下答案中的插件将解决此问题。我首选的包含对象传播的方法是 babel stage 0,因为您还可以获得其他很酷的功能,例如::绑定运算符。对象传播是第 2 阶段,因此如果您不想包括第 1 阶段和第 0 阶段,也可以使用它。

https://babeljs.io/docs/plugins/preset-stage-0/

Babel 不支持 ES7 规范中的 Object rest spread 转换。您需要为此使用插件。

要安装此插件:

npm i babel-plugin-transform-object-rest-spread --save-dev

然后,将其添加到您的 .babelrc

{
  "plugins": ["transform-object-rest-spread"]
}

更多信息在这里