{"body":"Maintain why-react-zh-CN sync to the current why-react","parents":["ed11f837630fdd046bca1ae5cb1f2100e8b064a9","d92f4782ac0f8566ec9afe54fecc1522a447b864"],"patch":"diff --git a\/docs\/docs\/01-why-react.zh-CN.md b\/docs\/docs\/01-why-react.zh-CN.md\nindex 029923a7f7..9954f48997 100644\n--- a\/docs\/docs\/01-why-react.zh-CN.md\n+++ b\/docs\/docs\/01-why-react.zh-CN.md\n@@ -7,7 +7,7 @@ next: displaying-data-zh-CN.html\n \n React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 **[MVC](https:\/\/en.wikipedia.org\/wiki\/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。\n \n-我们创造 React 是为了解决一个问题：**构建随着时间数据不断变化的大规模应用程序**。为了达到这个目标，React 采用下面两个主要的思想。\n+我们创造 React 是为了解决一个问题：**构建随着时间数据不断变化的大规模应用程序**。\n \n ### 简单\n \ndiff --git a\/docs\/docs\/02.1-jsx-in-depth.zh-CN.md b\/docs\/docs\/02.1-jsx-in-depth.zh-CN.md\nindex 4cc1995a21..8119196ace 100644\n--- a\/docs\/docs\/02.1-jsx-in-depth.zh-CN.md\n+++ b\/docs\/docs\/02.1-jsx-in-depth.zh-CN.md\n@@ -24,7 +24,7 @@ XML 有固定的标签开启和闭合的优点。这能让复杂的树更易于\n \n React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。\n \n-要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。\n+要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。\n \n ```javascript\n var myDivElement =

;\n@@ -39,7 +39,7 @@ var myElement = ;\n React.render(myElement, document.getElementById('example'));\n ```\n \n-React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。\n+React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。\n \n > 注意:\n >\n@@ -75,6 +75,15 @@ var app = React.createElement(\n );\n ```\n \n+当显示名称没有定义时，JSX 会根据变量赋值来推断类的 [显示名称](\/react\/docs\/component-specs.html#displayname) :\n+\n+```javascript\n+\/\/ 输入 (JSX):\n+var Nav = React.createClass({ });\n+\/\/ 输出 (JS):\n+var Nav = React.createClass({displayName: \"Nav\", });\n+```\n+\n 使用 [JSX 编译器](\/react\/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript，还有 [HTML 到 JSX 转换器](\/react\/html-jsx.html) 来把现有 HTML 转成 JSX。\n \n 如果你要使用 JSX，这篇 [新手入门](\/react\/docs\/getting-started.html) 教程来教你如何搭建环境。\n@@ -85,6 +94,68 @@ var app = React.createElement(\n > 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过\n > `React.createElement` 里的校验代码。\n \n+## 命名组件（Namespaced Components）\n+\n+如果你正在构建一个有很多子组件的组件，比如表单，你也许会最终得到许多的变量声明。\n+\n+```javascript\n+\/\/ 尴尬的变量声明块 \n+var Form = MyFormComponent;\n+var FormRow = Form.Row;\n+var FormLabel = Form.Label;\n+var FormInput = Form.Input;\n+\n+var App = (\n+

\n+ \n+ \n+ \n+ <\/FormRow>\n+ <\/Form>\n+);\n+```\n+\n+为了使其更简单和容易，*命名组件*令你使用包含其他组件作为属性的单一的组件。\n+\n+```javascript\n+var Form = MyFormComponent;\n+\n+var App = (\n+ \n+ \n+ \n+ \n+ <\/Form.Row>\n+ <\/Form>\n+);\n+```\n+\n+要做到这一点，你只需要把你的*\"子组件\"*创建为主组件的属性。\n+\n+```javascript\n+var MyFormComponent = React.createClass({ ... });\n+\n+MyFormComponent.Row = React.createClass({ ... });\n+MyFormComponent.Label = React.createClass({ ... });\n+MyFormComponent.Input = React.createClass({ ... });\n+```\n+\n+当编译你的代码时，JSX会恰当的进行处理。\n+\n+```javascript\n+var App = (\n+ React.createElement(Form, null,\n+ React.createElement(Form.Row, null,\n+ React.createElement(Form.Label, null),\n+ React.createElement(Form.Input, null)\n+ )\n+ )\n+);\n+```\n+\n+> 注意:\n+>\n+> 此特性在 [v0.11](\/react\/blog\/2014\/07\/17\/react-v0.11.html#jsx) 及以上可用.\n \n ## JavaScript 表达式\n \n@@ -102,6 +173,20 @@ var person = React.createElement(\n );\n ```\n \n+### Boolean 属性\n+\n+省略一个属性的值会导致JSX把它当做 `true`。要传值 `false`必须使用属性表达式。这常出现于使用HTML表单元素，含有属性如`disabled`, `required`, `checked` 和 `readOnly`。\n+\n+```javascript\n+\/\/ 在JSX中，对于禁用按钮这二者是相同的。\n+;\n+;\n+\n+\/\/ 在JSX中，对于不禁用按钮这二者是相同的。\n+;\n+;\n+```\n+\n ### 子节点表达式\n \n 同样地，JavaScript 表达式可用于描述子结点：\n@@ -119,12 +204,12 @@ var content = React.createElement(\n \n ### 注释\n \n-JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 `{}` 包围要注释的部分。\n+JSX 里添加注释很容易；它们只是 JS 表达式而已。你仅仅需要小心的是当你在一个标签的子节点块(props.children)时，要用 `{}` 包围要注释的部分。\n \n ```javascript\n var content = (\n

dillon1000/react

Files changed