From 2877e4305e5ad3833b2eace4c130462e54df080e Mon Sep 17 00:00:00 2001 From: iamchenxin Date: Wed, 23 Dec 2015 00:54:48 +0800 Subject: [PATCH] Update zh-docs with 7e2a7f0 --- docs/02-displaying-data.zh-CN.md | 10 +- docs/02.1-jsx-in-depth.md | 8 +- docs/02.1-jsx-in-depth.zh-CN.md | 3 +- docs/02.2-jsx-spread.zh-CN.md | 5 +- docs/02.3-jsx-gotchas.zh-CN.md | 7 + .../03-interactivity-and-dynamic-uis.zh-CN.md | 9 +- docs/04-multiple-components.zh-CN.md | 6 +- docs/05-reusable-components.md | 3 +- docs/05-reusable-components.zh-CN.md | 85 +++++--- docs/06-transferring-props.zh-CN.md | 9 +- docs/07-forms.zh-CN.md | 8 +- docs/08-working-with-the-browser.zh-CN.md | 59 +----- docs/08.1-more-about-ref-zh-CN.md | 174 ---------------- docs/08.1-more-about-refs.zh-CN.md | 195 +++++++----------- docs/09-tooling-integration.zh-CN.md | 16 +- docs/10-addons.zh-CN.md | 7 +- docs/10.1-animation.zh-CN.md | 15 +- 17 files changed, 180 insertions(+), 439 deletions(-) delete mode 100644 docs/08.1-more-about-ref-zh-CN.md diff --git a/docs/02-displaying-data.zh-CN.md b/docs/02-displaying-data.zh-CN.md index 6f0cf476..9d2bf6ba 100644 --- a/docs/02-displaying-data.zh-CN.md +++ b/docs/02-displaying-data.zh-CN.md @@ -1,7 +1,6 @@ --- id: displaying-data-zh-CN title: 显示数据 -layout: docs permalink: displaying-data-zh-CN.html prev: why-react-zh-CN.html next: jsx-in-depth-zh-CN.html @@ -9,7 +8,6 @@ next: jsx-in-depth-zh-CN.html 用户界面能做的最基础的事就是显示一些数据。React 让显示数据变得简单，当数据变化的时候，用户界面会自动同步更新。 - ## 开始 让我们看一个非常简单的例子。新建一个名为 `hello-react.html` 的文件，代码内容如下： @@ -57,7 +55,6 @@ setInterval(function() { }, 500); ``` - ## 被动更新 (Reactive Updates) 在浏览器中打开 `hello-react.html` ，在输入框输入你的名字。你会发现 React 在用户界面中只改变了时间， 任何你在输入框输入的内容一直保留着，即使你没有写任何代码来完成这个功能。React 为你解决了这个问题，做了正确的事。 @@ -66,7 +63,6 @@ setInterval(function() { 对这个组件的输入称为 `props` - "properties"的缩写。得益于 JSX 语法，它们通过参数传递。你必须知道在组件里，这些属性是不可改变的，也就是说 **`this.props` 是只读的**。 - ## 组件就像是函数 React 组件非常简单。你可以认为它们就是简单的函数，接受 `props` 和 `state` (后面会讨论) 作为参数，然后渲染出 HTML。正是应为它们是这么的简单，这使得它们非常容易理解。 @@ -75,12 +71,13 @@ React 组件非常简单。你可以认为它们就是简单的函数，接受 ` > > **只有一个限制**: React 组件只能渲染单个根节点。如果你想要返回多个节点，它们*必须*被包含在同一个节点里。 - ## JSX 语法 我们坚信组件是正确方法去做关注分离，而不是通过“模板”和“展示逻辑”。我们认为标签和生成它的代码是紧密相连的。此外，展示逻辑通常是很复杂的，通过模板语言实现这些逻辑会产生大量代码。 -我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板，这样你就可以用一个真正语言的所有表达能力去构建用户界面。为了使这变得更简单，我们做了一个非常简单、**可选**类似 HTML 语法 ，通过函数调用即可生成模板的编译器，称为 JSX。 +我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板，这样你就可以用一个真正语言的所有表达能力去构建用户界面。 + +为了使这变得更简单，我们做了一个非常简单、**可选**类似 HTML 语法 ，通过函数调用即可生成模板的编译器，称为 JSX。 **JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接，通过纯 JavaScript 你可以这么写： @@ -125,4 +122,3 @@ var root = React.DOM.ul({ className: 'my-list' }, React.DOM.li(null, 'Text Content') ); ``` - diff --git a/docs/02.1-jsx-in-depth.md b/docs/02.1-jsx-in-depth.md index c395f361..8397e504 100644 --- a/docs/02.1-jsx-in-depth.md +++ b/docs/02.1-jsx-in-depth.md @@ -82,10 +82,7 @@ var Nav = React.createClass({ }); var Nav = React.createClass({displayName: "Nav", }); ``` -Use the [Babel REPL](https://babeljs.io/repl/) to try out JSX and see how it -desugars into native JavaScript, and the -[HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to -JSX. +Use the [Babel REPL](https://babeljs.io/repl/) to try out JSX and see how it desugars into native JavaScript, and the [HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to JSX. If you want to use JSX, the [Getting Started](/react/docs/getting-started.html) guide shows how to set up compilation. @@ -163,8 +160,7 @@ var App = ( ### Attribute Expressions -To use a JavaScript expression as an attribute value, wrap the expression in a -pair of curly braces (`{}`) instead of quotes (`""`). +To use a JavaScript expression as an attribute value, wrap the expression in a pair of curly braces (`{}`) instead of quotes (`""`). ```javascript // Input (JSX): diff --git a/docs/02.1-jsx-in-depth.zh-CN.md b/docs/02.1-jsx-in-depth.zh-CN.md index 8548e467..2a499698 100644 --- a/docs/02.1-jsx-in-depth.zh-CN.md +++ b/docs/02.1-jsx-in-depth.zh-CN.md @@ -8,7 +8,6 @@ next: jsx-spread-zh-CN.html [JSX](https://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。 - ## 为什么要用 JSX？ 你不需要为了 React 使用 JSX，可以直接使用原生 JS。但是，我们建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法。 @@ -46,7 +45,6 @@ React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标 > 由于 JSX 就是 JavaScript，一些标识符像 `class` 和 `for` 不建议作为 XML > 属性名。作为替代，React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。 - ## 转换（Transform） JSX 把类 XML 的语法转成原生 JavaScript，XML 元素、属性和子节点被转换成 `React.createElement` 的参数。 @@ -90,6 +88,7 @@ var Nav = React.createClass({displayName: "Nav", }); > 注意: > +> > JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化 > 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过 > `React.createElement` 里的校验代码。 diff --git a/docs/02.2-jsx-spread.zh-CN.md b/docs/02.2-jsx-spread.zh-CN.md index ac4dd957..a7386d20 100644 --- a/docs/02.2-jsx-spread.zh-CN.md +++ b/docs/02.2-jsx-spread.zh-CN.md @@ -12,7 +12,6 @@ next: jsx-gotchas-zh-CN.html var component = ; ``` - ## 修改 Props 是不好的，明白吗 如果你不知道要设置哪些 Props，那么现在最好不要设置它： @@ -27,7 +26,6 @@ next: jsx-gotchas-zh-CN.html Props 应该被认为是不可变的。在别处修改 props 对象可能会导致预料之外的结果，所以原则上这将是一个冻结的对象。 - ## 展开属性（Spread Attributes） 现在你可以使用 JSX 的新特性 - 展开属性： @@ -49,7 +47,6 @@ Props 应该被认为是不可变的。在别处修改 props 对象可能会导 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 拥有更优雅的语法。 +这个 `...` 操作符（增强的操作符）已经被 [ES6 数组](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) 支持。相关的还有 ECMAScript 规范草案中的 [Object 剩余和展开属性（Rest and Spread Properties）](https://github.com/sebmarkbage/ecmascript-rest-spread)。我们利用了这些还在制定中标准中已经被支持的特性来使 JSX 拥有更优雅的语法。 diff --git a/docs/02.3-jsx-gotchas.zh-CN.md b/docs/02.3-jsx-gotchas.zh-CN.md index 61da0c0c..695e68ad 100644 --- a/docs/02.3-jsx-gotchas.zh-CN.md +++ b/docs/02.3-jsx-gotchas.zh-CN.md @@ -52,6 +52,7 @@ HTML 实体可以插入到 JSX 的文本中。
``` + ## 自定义 HTML 属性 如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 `data-` 前缀。 @@ -60,6 +61,12 @@ HTML 实体可以插入到 JSX 的文本中。
``` +然而，在自定义元素中任意的属性都是被支持的 （那些在tag名里带有连接符或者 `is="..."` 属性的） + +```javascript + +``` + 以 `aria-` 开头的 [网络无障碍](http://www.w3.org/WAI/intro/aria) 属性可以正常使用。 ```javascript diff --git a/docs/03-interactivity-and-dynamic-uis.zh-CN.md b/docs/03-interactivity-and-dynamic-uis.zh-CN.md index 467ce513..99592453 100644 --- a/docs/03-interactivity-and-dynamic-uis.zh-CN.md +++ b/docs/03-interactivity-and-dynamic-uis.zh-CN.md @@ -8,7 +8,6 @@ next: multiple-components-zh-CN.html 我们已经学习如何使用 React [显示数据](/react/docs/displaying-data-zh-CN.html)。现在让我们来学习如何创建交互式界面。 - ## 简单例子 ```javascript @@ -35,7 +34,6 @@ ReactDOM.render( ); ``` - ## 事件处理与合成事件（Synthetic Events） React 里只需把事件处理器（event handler）以骆峰命名（camelCased）形式当作组件的 props 传入即可，就像使用普通 HTML 那样。React 内部创建一套合成事件系统来使所有事件在 IE8 和以上浏览器表现一致。也就是说，React 知道如何冒泡和捕获事件，而且你的事件处理器接收到的 events 参数与 [W3C 规范](http://www.w3.org/TR/DOM-Level-3-Events/) 一致，无论你使用哪种浏览器。 @@ -48,19 +46,16 @@ React 里只需把事件处理器（event handler）以骆峰命名（camelCased **事件代理 ：** React 实际并没有把事件处理器绑定到节点本身。当 React 启动的时候，它在最外层使用唯一一个事件监听器处理所有事件。当组件被加载和卸载时，只是在内部映射里添加或删除事件处理器。当事件触发，React 根据映射来决定如何分发。当映射里处理器时，会当作空操作处理。参考 [David Walsh 很棒的文章](http://davidwalsh.name/event-delegate) 了解这样做高效的原因。 - ## 组件其实是状态机（State Machines） React 把用户界面当作简单状态机。把用户界面想像成拥有不同状态然后渲染这些状态，可以轻松让用户界面和数据保持一致。 React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。React 来决定如何最高效地更新 DOM。 - ## State 工作原理 常用的通知 React 数据变化的方法是调用 `setState(data, callback)`。这个方法会合并（merge） `data` 到 `this.state`，并重新渲染组件。渲染完成后，调用可选的 `callback` 回调。大部分情况下不需要提供 `callback`，因为 React 会负责把界面更新到最新状态。 - ## 哪些组件应该有 State？ 大部分组件的工作应该是从 `props` 里取数据并渲染出来。但是，有时需要对用户输入、服务器请求或者时间变化等作出响应，这时才需要使用 State。 @@ -69,16 +64,14 @@ React 里，只需更新组件的 state，然后根据新的 state 重新渲染 常用的模式是创建多个只负责渲染数据的无状态（stateless）组件，在它们的上层创建一个有状态（stateful）组件并把它的状态通过 `props` 传给子级。这个有状态的组件封装了所有用户的交互逻辑，而这些无状态组件则负责声明式地渲染数据。 - ## 哪些 *应该* 作为 State？ **State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。** 真实的应用中这种数据一般都很小且能被 JSON 序列化。当创建一个状态化的组件时，想象一下表示它的状态最少需要哪些数据，并只把这些数据存入 `this.state`。在 `render()` 里再根据 state 来计算你需要的其它数据。你会发现以这种方式思考和开发程序最终往往是正确的，因为如果在 state 里添加冗余数据或计算所得数据，需要你经常手动保持数据同步，不能让 React 来帮你处理。 - ## 哪些 *不应该* 作为 State？ `this.state` 应该仅包括能表示用户界面状态所需的最少数据。因些，它不应该包括： * **计算所得数据：** 不要担心根据 state 来预先计算数据 —— 把所有的计算都放到 `render()` 里更容易保证用户界面和数据的一致性。例如，在 state 里有一个数组（listItems），我们要把数组长度渲染成字符串， 直接在 `render()` 里使用 `this.state.listItems.length + ' list items'` 比把它放到 state 里好的多。 * **React 组件：** 在 `render()` 里使用当前 props 和 state 来创建它。 -* **基于 props 的重复数据：** 尽可能使用 props 来作为惟一数据来源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候，因为未来的 props 可能会变化。 +* **基于 props 的重复数据：** 尽可能使用 props 来作为实际状态的源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候，因为 props 可能因为父组件重绘的结果而变化。 diff --git a/docs/04-multiple-components.zh-CN.md b/docs/04-multiple-components.zh-CN.md index 85b4b7b5..55eeb88b 100644 --- a/docs/04-multiple-components.zh-CN.md +++ b/docs/04-multiple-components.zh-CN.md @@ -8,7 +8,6 @@ next: reusable-components-zh-CN.html 目前为止，我们已经学了如何用单个组件来展示数据和处理用户输入。下一步让我们来体验 React 最激动人心的特性之一：可组合性（composability）。 - ## 动机：关注分离 通过复用那些接口定义良好的组件来开发新的模块化组件，我们得到了与使用函数和类相似的好处。具体来说就是能够通过开发简单的组件把程序的*不同关注面分离*。如果为程序开发一套自定义的组件库，那么就能以最适合业务场景的方式来展示你的用户界面。 @@ -53,15 +52,12 @@ ReactDOM.render( ); ``` - ## 从属关系 -上面例子中，`Avatar` 拥有 `ProfilePic` 和 `ProfileLink` 的实例。`拥有者` 就是给其它组件设置 `props` 的那个组件。更正式地说， -如果组件 `Y` 在 `render()` 方法是创建了组件 `X`，那么 `Y` 就拥有 `X`。上面讲过，组件不能修改自身的 `props` - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的基本不变量。 +上面例子中，`Avatar` 拥有 `ProfilePic` 和 `ProfileLink` 的实例。`拥有者` 就是给其它组件设置 `props` 的那个组件。更正式地说，如果组件 `Y` 在 `render()` 方法是创建了组件 `X`，那么 `Y` 就拥有 `X`。上面讲过，组件不能修改自身的 `props` - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的基本不变量。 把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的，而父子关系简单来讲就是DOM 里的标签的关系。在上一个例子中，`Avatar` 拥有 `div`、`ProfilePic` 和 `ProfileLink` 实例，`div` 是 `ProfilePic` 和 `ProfileLink` 实例的**父级**（但不是拥有者）。 - ## 子级 实例化 React 组件时，你可以在开始标签和结束标签之间引用在React 组件或者Javascript 表达式： diff --git a/docs/05-reusable-components.md b/docs/05-reusable-components.md index 62b6295b..0808d102 100644 --- a/docs/05-reusable-components.md +++ b/docs/05-reusable-components.md @@ -80,8 +80,7 @@ React.createClass({ ### Single Child -With `React.PropTypes.element` you can specify that only a single child can be passed to -a component as children. +With `React.PropTypes.element` you can specify that only a single child can be passed to a component as children. ```javascript var MyComponent = React.createClass({ diff --git a/docs/05-reusable-components.zh-CN.md b/docs/05-reusable-components.zh-CN.md index 58bf64c2..3bc5f345 100644 --- a/docs/05-reusable-components.zh-CN.md +++ b/docs/05-reusable-components.zh-CN.md @@ -8,7 +8,6 @@ next: transferring-props-zh-CN.html 设计接口的时候，把通用的设计元素（按钮，表单框，布局组件等）拆成接口良好定义的可复用的组件。这样，下次开发相同界面程序时就可以写更少的代码，也意义着更高的开发效率，更少的 Bug 和更少的程序体积。 - ## Prop 验证 随着应用不断变大，保证组件被正确使用变得非常有用。为此我们引入 `propTypes`。`React.PropTypes` 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。注意为了性能考虑，只在开发环境验证 `propTypes`。下面用例子来说明不同验证器的区别： @@ -32,10 +31,12 @@ React.createClass({ // React 元素 optionalElement: React.PropTypes.element, + // 你同样可以断言一个 prop 是一个类的实例。 // 用 JS 的 instanceof 操作符声明 prop 为类的实例。 optionalMessage: React.PropTypes.instanceOf(Message), - // 用 enum 来限制 prop 只接受指定的值。 + // 你可以用 enum 的方式 + // 确保你的 prop 被限定为指定值。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 指定的多个对象类型中的一个 @@ -57,14 +58,16 @@ React.createClass({ fontSize: React.PropTypes.number }), - // 以后任意类型加上 `isRequired` 来使 prop 不可空。 + // 你可以在任意东西后面加上 `isRequired` + // 来确保 如果 prop 没有提供 就会显示一个警告。 requiredFunc: React.PropTypes.func.isRequired, // 不可空的任意类型 requiredAny: React.PropTypes.any.isRequired, - // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接 - // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。 + // 你可以自定义一个验证器。如果验证失败需要返回一个 Error 对象。 + // 不要直接使用 `console.warn` 或抛异常， + // 因为这在 `oneOfType` 里不起作用。 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); @@ -75,6 +78,26 @@ React.createClass({ }); ``` +### Single Child + +用 `React.PropTypes.element` 你可以指定仅有一个子级能被传送给组件 + +```javascript +var MyComponent = React.createClass({ + propTypes: { + children: React.PropTypes.element.isRequired + }, + + render: function() { + return ( +
+ {this.props.children} // 这里必须是一个元素否则就会警告 +
+ ); + } + +}); +``` ## 默认 Prop 值 @@ -93,9 +116,9 @@ var ComponentWithDefaultProps = React.createClass({ 当父级没有传入 props 时，`getDefaultProps()` 可以保证 `this.props.value` 有默认值，注意 `getDefaultProps` 的结果会被 *缓存*。得益于此，你可以直接使用 props，而不必写手动编写一些重复或无意义的代码。 -## 传递 Props：小技巧 +## 传递 Props：捷径 -有一些常用的 React 组件只是对 HTML 做简单扩展。通常，你想少写点代码来把传入组件的 props 复制到对应的 HTML 元素上。这时 JSX 的 _spread_ 语法会帮到你： +有一些常用的 React 组件只是对 HTML 做简单扩展。通常，你想 复制任何传进你的组件的HTML属性 到底层的HTML元素上。为了减少输入，你可以用 JSX _spread_ 语法来完成： ```javascript var CheckLink = React.createClass({ @@ -113,28 +136,6 @@ ReactDOM.render( ); ``` -## 单个子级 - -`React.PropTypes.element` 可以限定只能有一个子级传入。 - -```javascript -var MyComponent = React.createClass({ - propTypes: { - children: React.PropTypes.element.isRequired - }, - - render: function() { - return ( -
- {this.props.children} // 有且仅有一个元素，否则会抛异常。 -
- ); - } - -}); -``` - - ## Mixins 组件是 React 里复用代码最佳方式，但是有时一些复杂的组件间也需要共用一些功能。有时会被称为 [跨切面关注点](https://en.wikipedia.org/wiki/Cross-cutting_concern)。React 使用 `mixins` 来解决这类问题。 @@ -228,3 +229,29 @@ Counter.defaultProps = { initialCount: 0 }; 不幸的是ES6的发布没有任何mixin的支持。因此，当你在ES6 classes下使用React时不支持mixins。作为替代，我们正在努力使它更容易支持这些用例不依靠mixins。 +## 无状态函数 + +你也可以用 JavaScript 函数来定义你的 React 类。例如使用无状态函数语法： + +```javascript +function HelloMessage(props) { + return
Hello {props.name}
; +} +ReactDOM.render(, mountNode); +``` + +或者使用新的ES6箭头函数: + +```javascript +var HelloMessage = (props) =>
Hello {props.name}
; +ReactDOM.render(, mountNode); +``` + +这个简化的组件API旨在用于那些纯函数态的组件 。这些组件必须没有保持任何内部状态，没有备份实例，也没有组件生命周期方法。他们纯粹的函数式的转化他们的输入，没有引用。 +然而，你仍然可以以设置为函数的properties的方式来指定 `.propTypes` 和 `.defaultProps`，就像你在ES6类里设置他们那样。 + +> 注意： +> +> 因为无状态函数没有备份实例，你不能附加一个引用到一个无状态函数组件。 通常这不是问题，因为无状态函数不提供一个命令式的API。没有命令式的API，你就没有任何需要实例来做的事。然而，如果用户想查找无状态函数组件的DOM节点，他们必须把这个组件包装在一个有状态组件里（比如，ES6 类组件） 并且连接一个引用到有状态的包装组件。 + +在理想世界里，你的大多数组件都应该是无状态函数式的，因为这些无状态组件可以在React核心里经过一个快速的代码路径。 如果可能，这是推荐的模式。 diff --git a/docs/06-transferring-props.zh-CN.md b/docs/06-transferring-props.zh-CN.md index 6ed28cbd..0184c293 100644 --- a/docs/06-transferring-props.zh-CN.md +++ b/docs/06-transferring-props.zh-CN.md @@ -20,7 +20,7 @@ React 里有一个非常常用的模式就是对组件做一层抽象。组件 React.createElement(Component, Object.assign({}, this.props, { more: 'values' })); ``` -下面的教程介绍一些最佳实践。使用了 JSX 和 ES7 的还在试验阶段的特性。 +下面的教程介绍一些最佳实践。使用了 JSX 和 试验性的ECMAScript 语法。 ## 手动传递 @@ -100,7 +100,6 @@ var FancyCheckbox = React.createClass({ }); ``` - ## 使用和传递同一个 Prop 如果组件需要使用一个属性又要往下传递，可以直接使用 `checked={checked}` 再传一次。这样做比传整个 `this.props` 对象要好，因为更利于重构和语法检查。 @@ -129,12 +128,11 @@ var FancyCheckbox = React.createClass({ > > 顺序很重要，把 `{...other}` 放到 JSX props 前面会使它不被覆盖。上面例子中我们可以保证 input 的 type 是 `"checkbox"`。 - ## 剩余属性和展开属性 `...` 剩余属性可以把对象剩下的属性提取到一个新的对象。会把所有在解构赋值中列出的属性剔除。 -这是 [ES7 草案](https://github.com/sebmarkbage/ecmascript-rest-spread) 中的试验特性。 +这是 [ECMAScript 草案](https://github.com/sebmarkbage/ecmascript-rest-spread) 中的试验特性。 ```javascript var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; @@ -145,8 +143,7 @@ z; // { a: 3, b: 4 } > 注意: > -> 使用 [JSX 命令行工具](https://www.npmjs.com/package/react-tools) 配合 `--harmony` 标记来启用 ES7 语法。 - +> 要用 Babel 6转换 rest 和 spread 属性，你需要安装 [`es2015`](https://babeljs.io/docs/plugins/preset-es2015/) preset，[`transform-object-rest-spread`](https://babeljs.io/docs/plugins/transform-object-rest-spread/) 插件并在 `.babelrc` 里配置他们. ## 使用 Underscore 来传递 diff --git a/docs/07-forms.zh-CN.md b/docs/07-forms.zh-CN.md index ad6bf7df..4df7250f 100644 --- a/docs/07-forms.zh-CN.md +++ b/docs/07-forms.zh-CN.md @@ -32,7 +32,6 @@ next: working-with-the-browser-zh-CN.html > > 对于 `` and `