Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Chinese translation of js-spread #2694

Merged
merged 1 commit into from
Dec 12, 2014
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
52 changes: 52 additions & 0 deletions docs/docs/02.2-jsx-spread.zh-CN.md
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 拥有更优雅的语法。