From b08c85bc42f3bee9904df29338d8673d3bfe5353 Mon Sep 17 00:00:00 2001 From: zhaozhiming Date: Fri, 22 Feb 2019 15:46:50 +0800 Subject: [PATCH 1/9] docs(cn): add react without es6 translate --- content/docs/react-without-es6.md | 67 ++++++++++++++++--------------- 1 file changed, 35 insertions(+), 32 deletions(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 8b54d09812..16bd95752d 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -1,10 +1,10 @@ --- id: react-without-es6 -title: React Without ES6 +title: 不使用 ES6 permalink: docs/react-without-es6.html --- -Normally you would define a React component as a plain JavaScript class: +通常我们会用 JavaScript 的 `class` 关键字来定义 React 组件： ```javascript class Greeting extends React.Component { @@ -14,7 +14,7 @@ class Greeting extends React.Component { } ``` -If you don't use ES6 yet, you may use the `create-react-class` module instead: +如果你不打算使用 ES6，你也可以使用 `create-react-class` 模块来创建： ```javascript @@ -26,11 +26,11 @@ var Greeting = createReactClass({ }); ``` -The API of ES6 classes is similar to `createReactClass()` with a few exceptions. +ES6 中 class 与 `createReactClass` 方法十分相似，但有以下几个区别值得注意。 -## Declaring Default Props {#declaring-default-props} +## 声明默认属性 {#declaring-default-props} -With functions and ES6 classes `defaultProps` is defined as a property on the component itself: +如果使用函数和 ES6 的class 关键字创建组件，可以直接把自定义属性对象写到组件的 `defaultProps` 属性中： ```javascript class Greeting extends React.Component { @@ -42,7 +42,8 @@ Greeting.defaultProps = { }; ``` -With `createReactClass()`, you need to define `getDefaultProps()` as a function on the passed object: +如果使用 `createReactClass` 方法创建组件，那就需要在参数对象中定义 `getDefaultProps` 方法，并且在这个方法中返回包含自定义属性的对象： + ```javascript var Greeting = createReactClass({ @@ -57,9 +58,10 @@ var Greeting = createReactClass({ }); ``` -## Setting the Initial State {#setting-the-initial-state} +## 设置初始状态 {#setting-the-initial-state} In ES6 classes, you can define the initial state by assigning `this.state` in the constructor: +如果使用 ES6 的 class 关键字创建组件，你可以通过给 `this.state` 赋值的方式来定义组件的初始状态： ```javascript class Counter extends React.Component { @@ -71,7 +73,7 @@ class Counter extends React.Component { } ``` -With `createReactClass()`, you have to provide a separate `getInitialState` method that returns the initial state: +如果使用 `createReactClass` 方法创建组件，你就需要多写一个 `getInitialState` 方法，并让这个方法返回你要定义的初始属性： ```javascript var Counter = createReactClass({ @@ -82,16 +84,16 @@ var Counter = createReactClass({ }); ``` -## Autobinding {#autobinding} +## 自动绑定 {#autobinding} -In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` in the constructor: +对于使用 ES6 的 class 关键字创建的 React 组件，组件中的方法遵循与常规 ES6 class 相同的语法规则。这意味着这些方法不会自动绑定`this` 到这个组件实例。 你需要在 constructor 中为方法手动添加 `.bind(this)`： ```javascript class SayHello extends React.Component { constructor(props) { super(props); this.state = {message: 'Hello!'}; - // This line is important! + // 这一行很重要！ this.handleClick = this.handleClick.bind(this); } @@ -100,7 +102,7 @@ class SayHello extends React.Component { } render() { - // Because `this.handleClick` is bound, we can use it as an event handler. + // 由于 `this.handleClick` 已经绑定至实例，因此我们才可以用它来处理点击事件 return (