blocks|key|4490812|text|对于那些来自Python世界的人来说，JSX传播属性等同于Unpacking+Argument+Lists+(+Python+**-operator)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4490813|我知道这是一个JSX问题，但使用类比有时有助于更快地解决它。|4490814|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.python.org/3/tutorial/controlflow.html#unpacking-argument-lists^0|1R|2|T|O|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

For those who come from the Python world, JSX Spread Attributes are equivalent to
<a href="https://docs.python.org/3/tutorial/controlflow.html#unpacking-argument-lists" rel="noreferrer">Unpacking Argument Lists</a> (the Python <code>**</code>-operator).

I'm aware this is a JSX question, but working with analogies sometimes helps to get it faster.

blocks|key|4489877|text|...(扩展运算符)在React中用于：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4489878|提供一种整洁的方式将道具从父组件传递到子组件。例如，给定父组件中的这些道具，|4489879|this.props+=+{
++username:+"danM",
++email:+"dan@mail.com"
}|code-block|syntax|javascript|4489880|它们可以通过以下方式传递给孩子，|4489881|<ChildComponent+{...this.props}+/>|4489882|它与下面的类似|4489883|<ChildComponent+username={this.props.username}+email={this.props.email}+/>|4489884|但是干净多了。|4489885|entityMap^0|0|3|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|15|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|17|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|X|$]]

The <code>...</code>(spread operator) is used in React to:
provide a neat way to pass props from parent to child components. E.g., given these props in a parent component,
<pre class="lang-js prettyprint-override"><code>this.props = {
 username: &quot;danM&quot;,
 email: &quot;dan@mail.com&quot;
}
</code></pre>
they could be passed in the following manner to the child,
<pre><code>&lt;ChildComponent {...this.props} /&gt;
</code></pre>
which is similar to this
<pre><code>&lt;ChildComponent username={this.props.username} email={this.props.email} /&gt;
</code></pre>
but way cleaner.

blocks|key|4490888|text|它在JavaScript中称为扩展语法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4490889|它用于解构JavaScript中数组或对象。|4490890|示例：|4490891|const+objA+=+{+a:+1,+b:+2,+c:+3+}
const+objB+=+{+...objA,+d:+1+}
/*+Result+of+objB+will+be+{+a:+1,+b:+2,+c:+3,+d:+1+}+*/
console.log(objB)

const+objC+=+{+....objA,+a:+3+}
/*+result+of+objC+will+be+{+a:+3,+b:+2,+c:+3,+d:+1+}+*/
console.log(objC)|code-block|syntax|javascript|4490892|你可以用JavaScript中的Object.assign()函数来做同样的事情。|offset|length|style|CODE|4490893|参考:扩展syntax|4490894|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax^0|0|0|0|0|G|F|0|5|6|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|14|8|@$M|15|N|16|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|17|8|@]|9|@$M|18|N|19|1|1A]]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

It is called spreads syntax in JavaScript.
It use for destructuring an array or object in JavaScript.
Example:
<pre><code>const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* Result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)

const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)
</code></pre>
You can do it same result with <code>Object.assign()</code> function in JavaScript.
Reference: Spread <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax" rel="nofollow noreferrer">syntax</a>

blocks|key|4490952|text|在React应用程序中传递道具是很常见的做法。通过这样做，我们能够对子组件应用状态更改，而不管它是纯的还是不纯的(无状态或有状态)。有时，当传入属性时，最好的方法是传入单个属性或整个属性对象。由于ES6中对数组的支持，我们得到了"...“现在，我们可以实现将整个对象传递给子对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4490953|将道具传递给子对象的典型过程如下所示：|4490954|var+component+=+<Component+foo={x}+bar={y}+/>;|code-block|syntax|javascript|4490955|当道具的数量很少时，这是可以使用的，但当道具数量变得太高时，就会变得难以管理。当您不知道子组件中所需的属性，而典型的JavaScript方法只是简单地设置这些属性并稍后绑定到对象时，就会出现此方法的问题。这会导致propType检查和隐含的堆栈跟踪错误出现问题，这些错误没有任何帮助，并且会导致调试延迟。以下是此实践的示例，以及不应执行的操作：|4490956|var+component+=+<Component+/>;
component.props.foo+=+x;+//+bad
component.props.bar+=+y;|4490957|通过这样做，可以实现相同的结果，但会获得更适当的成功：|4490958|var+props+=+{};
props.foo+=+x;
props.bar+=+y;
var+component+=+Component(props);+//+Where+did+my+JSX+go?|4490959|但是没有使用JSX扩展或JSX，所以要将其循环回到等式中，我们现在可以这样做：|4490960|var+props+=+{};
props.foo+=+x;
props.bar+=+y;
var+component+=+<Component+{...props}+/>;|4490961|"...props“中包含的属性为foo:+x，bar:+y。这可以与其他属性结合使用，以使用以下语法覆盖"...props”的属性：|4490962|var+props+=+{+foo:+'default'+};
var+component+=+<Component+{...props}+foo={'override'}+/>;
console.log(component.props.foo);+//+'override'|4490963|此外，我们还可以将其他属性对象相互复制或以这种方式组合在一起：|4490964|var+oldObj+=+{+foo:+'hello',+bar:+'world'+};
var+newObj+=+{+...oldObj,+foo:+'hi'+};
console.log(newObj.foo);+//+'hi';
console.log(newObj.bar);+//+'world';|4490965|或者像这样合并两个不同的对象(并不是在所有react版本中都可用)：|4490966|var+ab+=+{+...a,+...b+};+//+merge(a,+b)|4490967|根据Facebook的react/docs网站，另一种解释是：|4490968|如果您已经将"props“作为对象，并且希望在JSX中传递它，则可以使用"...”作为扩展操作符来传递整个props对象。以下两个示例是等效的：|4490969|function+App1()+{
++return+<Greeting+firstName="Ben"+lastName="Hector"+/>;
}



function+App2()+{
++const+props+=+{firstName:+'Ben',+lastName:+'Hector'};
++return+<Greeting+{...props}+/>;
}|4490970|在构建通用容器时，扩散属性可能非常有用。然而，它们也会让你的代码变得杂乱无章，因为它很容易将许多不相关的道具传递给不关心它们的组件。此语法应谨慎使用。|4490971|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1H|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1J|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1L|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1M|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1N|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1O|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1P|8|@]|9|@]|A|$]]|$1|W|3|X|5|F|7|1Q|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|6|7|1R|8|@]|9|@]|A|$]]|$1|10|3|11|5|F|7|1S|8|@]|9|@]|A|$G|H]]|$1|12|3|13|5|6|7|1T|8|@]|9|@]|A|$]]|$1|14|3|15|5|F|7|1U|8|@]|9|@]|A|$G|H]]|$1|16|3|17|5|6|7|1V|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|1W|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|F|7|1X|8|@]|9|@]|A|$G|H]]|$1|1C|3|1D|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|1E|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]]|1F|$]]

It is common practice to pass props around in a React application. In doing this we able to apply state changes to the child component regardless of whether it is Pure or Impure (stateless or stateful). There are times when the best approach, when passing in props, is to pass in singular properties or an entire object of properties. With the support for arrays in ES6 we were given the "..." notation and with this we are now able to achieve passing an entire object to a child. 

The typical process of passing props to a child is noted with this syntax:

<pre><code>var component = &lt;Component foo={x} bar={y} /&gt;;
</code></pre>

This is fine to use when the number of props is minimal but becomes unmanageable when the prop numbers get too much higher. A problem with this method occurs when you do not know the properties needed within a child component and the typical JavaScript method is to simple set those properties and bind to the object later. This causes issues with propType checking and cryptic stack trace errors that are not helpful and cause delays in debugging. The following is an example of this practice, and what not to do:

<pre><code>var component = &lt;Component /&gt;;
component.props.foo = x; // bad
component.props.bar = y;
</code></pre>

This same result can be achieved but with more appropriate success by doing this:

<pre><code>var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?
</code></pre>

But does not use JSX spread or JSX so to loop this back into the equation we can now do something like this: 

<pre><code>var props = {};
props.foo = x;
props.bar = y;
var component = &lt;Component {...props} /&gt;;
</code></pre>

The properties included in "...props" are foo: x, bar: y. This can be combined with other attributes to override the properties of "...props" using this syntax:

<pre><code>var props = { foo: 'default' };
var component = &lt;Component {...props} foo={'override'} /&gt;;
console.log(component.props.foo); // 'override'
</code></pre>

In addition we can copy other property objects onto each other or combine them in this manner:

<pre><code>var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';
</code></pre>

Or merge two different objects like this (this is not yet available in all react versions): 

<pre><code>var ab = { ...a, ...b }; // merge(a, b)
</code></pre>

Another way of explaining this, according to Facebook's react/docs site is:

If you already have "props" as an object, and you want to pass it in JSX, you can use "..." as a SPREAD operator to pass the whole props object. The following two examples are equivalent: 

<pre><code>function App1() {
 return &lt;Greeting firstName="Ben" lastName="Hector" /&gt;;
}



function App2() {
 const props = {firstName: 'Ben', lastName: 'Hector'};
 return &lt;Greeting {...props} /&gt;;
}
</code></pre>

Spread attributes can be useful when you are building generic containers. However, they can also make your code messy by making it easy to pass a lot of irrelevant props to components that don't care about them. This syntax should be used sparingly.

blocks|key|4491031|text|扩展运算符允许您将对象、字符串或数组等可迭代扩展到其元素中，而Rest运算符通过将一组元素缩减为一个数组来执行相反的操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4491032|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The Spread operator lets you expand an iterable like an object, string, or array into its elements while the Rest operator does the inverse by reducing a set of elements into one array.

blocks|key|4491085|text|扩展语法允许像array和object这样的数据结构对它们进行拆分，以便从它们中提取值或向它们添加值。例如，const+obj={name:"ram",age:10}+const+{name}=obj从上面的例子中，我们可以说我们解构了obj并从该对象中提取了名称。类似地，本例中的const+newObj={...obj,address:"Nepal"}向该对象添加了一个新属性。这在array的情况下也是类似的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4491086|entityMap^0|1I|1A|3X|11|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

The spread syntax allows an data structures like array and object to destructure
them for either to extract a value from them or to add a value to them.
e.g
<code>const obj={name:&quot;ram&quot;,age:10} const {name}=obj</code>
from above example we can say that we destructured the obj and extracted name from that object.
similarly,
<code>const newObj={...obj,address:&quot;Nepal&quot;}</code>
from this example we added a new property to that object.
This is similar in case of array too.

blocks|key|4490840|text|这就是所谓的价差。顾名思义，它的意思是将它的任何值放入这些数组或对象中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4490841|例如：|4490842|let+a+=+[1,+2,+3];
let+b+=+[...a,+4,+5,+6];
console.log(b);
>+[1,+2,+3,+4,+5,+6]|code-block|syntax|javascript|4490843|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Those are called spreads. Just as the name implies, it means it's putting whatever the value of it in those array or objects.
Such as:
<pre><code>let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
&gt; [1, 2, 3, 4, 5, 6]
</code></pre>

What does the <code>...</code> do in this React (using JSX) code and what is it called?

<pre><code>&lt;Modal {...this.props} title='Modal heading' animation={false}&gt;
</code></pre>

What do these three dots in React do?

数据结构

容器

Python

...在这个React (使用JSX)代码中做了什么?它叫什么？<Modal {...this.props} title='Modal heading' animation={false}>

问React中的这三个点是做什么的？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React中的这三个点是做什么的？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React中的这三个点是做什么的？
EN