如何使用JSX“collected”将react元素上的属性定义为单个对象?

简而言之,它是由JSX解析器完成的,解析器实现之一是 https://github.com/RReverser/acorn-jsx .

这个过程的例子是,

• 查看JSX代码,逐行查看;
• 根据规范识别反应元件(见下文);
• 对于每个元素,将解析它们的属性和值。把他们推进 attributes 数组。以后会是什么 props 对象 React.createElement .

描述JSX语法的规范可以在这里找到 https://github.com/facebook/jsx .

JSX syntax 句法上的糖分 React.createElement , JSX props 句法上的糖分 react.createElement(反应.createElement) props参数,它是一个对象。

<App val={20} val2={1}/>

句法上的糖分

React.createElement(App, { val: 20, val2: 1 });

剩下的道具, spread attributes 它们适用于对象扩展语法。

<App val={20} val2={1} {...rest}/>

是ES2018的句法糖吗?

React.createElement(App, { val: 20, val2: 1, ...rest });

或ES6

React.createElement(App, Object.assign({ val: 20, val2: 1}, rest));