Question

此代码中{...this.props}的含义是什么？

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

Answer 1

{...variable}语法被称为＆＃34;传播属性＆＃34;。

这样做，基本上，它需要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" />

Answer 2

我认为可能是传播操作员（三个点）让你失望？：）

What does the three dots in react do?

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

Answer 3

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

什么＆＃34; ... this.props＆＃34;在ReactJS意味着什么？

3 个答案: