Spreading操作符的工作原理与在React JS[duplicate]中指定对象不同

Question

当我执行以下操作时，一切正常：

this.state.sections.map（{a，b}）=

但是，当我执行以下操作时（我认为这是等效的），我会得到一个错误，说。是预期的：

this.state.sections.map（{a，b}）=

为什么会这样？..{a，b}在JS中是否等同于a，b？




Answer 1

它们在JSX上下文中是不等价的：

// For given function component
const MenuItem = ({ a, b }) => <></>

// Use cases
(props /* {a,b} */) => <MenuItem {...props} />
<MenuItem a={a} b={b} />
<MenuItem { ...{a,b} }/>

// Transpiles to
React.createElement(MenuItem, { a, b });

// Syntax Error
// as this JSX doesn't transpile to React.createElement 
<MenuItem {a, b} />

/*
Unexpected token, expected "..." (1:11)
> 1 | <MenuItem {a, b} />;
*/

但在JS中，它们确实会产生相同的结构：

a = 5;
b= 7;
{ a, b } // { a: 5, b: 7 }
{ ...{ a, b } // { a: 5, b: 7 }

请注意babel编译器和JS传输的代码之间的差异。

• 查看巴贝尔游乐场查看结果。