-
Notifications
You must be signed in to change notification settings - Fork 47.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2694 from camsong/master
Add Chinese translation of js-spread
- Loading branch information
Showing
1 changed file
with
52 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
--- | ||
id: jsx-spread-zh-CN | ||
title: JSX 展开属性 (Spread Attributes) | ||
permalink: jsx-spread-zh-CN.html | ||
prev: jsx-in-depth-zh-CN.html | ||
next: jsx-gotchas-zh-CN.html | ||
--- | ||
|
||
如果你事先知道模块需要的全部 Props(属性),JSX 很容易地这样写: | ||
|
||
```javascript | ||
var component = <Component foo={x} bar={y} />; | ||
``` | ||
|
||
## 修改 Props 是不好的,明白吗 | ||
|
||
如果你不知道要设置哪些 Props,那么现在最好不要设置它: | ||
|
||
```javascript | ||
var component = <Component />; | ||
component.props.foo = x; // 不好 | ||
component.props.bar = y; // 同样不好 | ||
``` | ||
|
||
这样是反模式,因为 React 不能帮你检查属性类型(propTypes)。这样即使你的 属性类型有错误也不能得到清晰的错误提示。 | ||
|
||
Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果,所以最好不要去修改 props 对象。 | ||
|
||
## 扩展属性 (Spread Attributes) | ||
|
||
现在你可以使用 JSX 的新特性 - 扩展属性: | ||
|
||
```javascript | ||
var props = {}; | ||
props.foo = x; | ||
props.bar = y; | ||
var component = <Component {...props} />; | ||
``` | ||
|
||
传入对象的属性会被复制到模块内。 | ||
|
||
它能被多次使用,也可以和其它属性一起用。注意顺序很重要,后面的会覆盖掉前面的。 | ||
|
||
```javascript | ||
var props = { foo: 'default' }; | ||
var component = <Component {...props} foo={'override'} />; | ||
console.log(component.props.foo); // 'override' | ||
``` | ||
|
||
## 这个奇怪的 `...` 标记是什么? | ||
|
||
这个 `...` 操作符(也被叫做)已经被 [ES6 数组](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) 支持。相关的还有 ES7 规范草案中的 [Object 剩余和展开属性(Rest and Spread Properties)](https://github.com/sebmarkbage/ecmascript-rest-spread)。我们利用了这些还在制定中标准中已经被支持的特性来使 JSX 拥有更优雅的语法。 |