ReactJS 中的“...this.props”是什么意思？ [复制]答案

【问题标题】：What does "...this.props" mean in ReactJS? [duplicate]ReactJS 中的“...this.props”是什么意思？ [复制]
【发布时间】：2016-08-04 01:10:15
【问题描述】：

{...this.props} 在这段代码中是什么意思？

<div {...this.props} style={{ height: `100%`, }}

【问题讨论】：

重复，检查答案stackoverflow.com/questions/31048953/…

标签： javascript reactjs ecmascript-6

【解决方案1】：

{...variable} 语法称为“传播属性”。

基本上，它的作用是获取this.props（或任何其他传递的变量）的每个属性并将它们应用于元素。

例子：

props = {className: 'big', href: 'http://example.com'};

<a {...props} />
// the above line is equal to the following
<a className="big" href="http://example.com" />

【讨论】：

【解决方案2】：

我认为可能是 spread operator（三个点）让你失望了？ :)

What does the three dots in react do?

编辑： 详细地说，您可能正在查看 JSX 模板？实际上，每个属性都是生成的 HTML 中 style 属性的 CSS 属性。此外，扩展运算符使得 this.props 中的所有属性都得到扩展，即就像 this.props 中的每个属性都在模板中显式输出一样.

【讨论】：

@Zhao Yi, 取代码形式stackoverflow.com/a/31049016/1589444 var component = <Component {...jsonboject} />; 所以在Component 的类定义中如果你在render 函数中做console.log(this.props)，它就像传递和不同名称的数组，并在参数中直接访问数组的所有键形式名称变量，如this.props。

【解决方案3】：

{...this.props} 表示当前组件的所有道具。假设您在道具中有对象 a 和对象 b，而不是 {...this.props} 意味着 a 和 b。您可以使用 this 将当前组件的所有 props 传递给另一个组件。

【讨论】：