diff --git a/docs/02.1-jsx-in-depth.zh-CN.md b/docs/02.1-jsx-in-depth.zh-CN.md index 4cc1995a..8119196a 100644 --- a/docs/02.1-jsx-in-depth.zh-CN.md +++ b/docs/02.1-jsx-in-depth.zh-CN.md @@ -24,7 +24,7 @@ XML 有固定的标签开启和闭合的优点。这能让复杂的树更易于 React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。 -要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。 +要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名。 ```javascript var myDivElement =
; @@ -39,7 +39,7 @@ var myElement = ; React.render(myElement, document.getElementById('example')); ``` -React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。 +React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。 > 注意: > @@ -75,6 +75,15 @@ var app = React.createElement( ); ``` +当显示名称没有定义时,JSX 会根据变量赋值来推断类的 [显示名称](/react/docs/component-specs.html#displayname) : + +```javascript +// 输入 (JSX): +var Nav = React.createClass({ }); +// 输出 (JS): +var Nav = React.createClass({displayName: "Nav", }); +``` + 使用 [JSX 编译器](/react/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript,还有 [HTML 到 JSX 转换器](/react/html-jsx.html) 来把现有 HTML 转成 JSX。 如果你要使用 JSX,这篇 [新手入门](/react/docs/getting-started.html) 教程来教你如何搭建环境。 @@ -85,6 +94,68 @@ var app = React.createElement( > 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过 > `React.createElement` 里的校验代码。 +## 命名组件(Namespaced Components) + +如果你正在构建一个有很多子组件的组件,比如表单,你也许会最终得到许多的变量声明。 + +```javascript +// 尴尬的变量声明块 +var Form = MyFormComponent; +var FormRow = Form.Row; +var FormLabel = Form.Label; +var FormInput = Form.Input; + +var App = ( +
+ + + + +
+); +``` + +为了使其更简单和容易,*命名组件*令你使用包含其他组件作为属性的单一的组件。 + +```javascript +var Form = MyFormComponent; + +var App = ( +
+ + + + +
+); +``` + +要做到这一点,你只需要把你的*"子组件"*创建为主组件的属性。 + +```javascript +var MyFormComponent = React.createClass({ ... }); + +MyFormComponent.Row = React.createClass({ ... }); +MyFormComponent.Label = React.createClass({ ... }); +MyFormComponent.Input = React.createClass({ ... }); +``` + +当编译你的代码时,JSX会恰当的进行处理。 + +```javascript +var App = ( + React.createElement(Form, null, + React.createElement(Form.Row, null, + React.createElement(Form.Label, null), + React.createElement(Form.Input, null) + ) + ) +); +``` + +> 注意: +> +> 此特性在 [v0.11](/react/blog/2014/07/17/react-v0.11.html#jsx) 及以上可用. ## JavaScript 表达式 @@ -102,6 +173,20 @@ var person = React.createElement( ); ``` +### Boolean 属性 + +省略一个属性的值会导致JSX把它当做 `true`。要传值 `false`必须使用属性表达式。这常出现于使用HTML表单元素,含有属性如`disabled`, `required`, `checked` 和 `readOnly`。 + +```javascript +// 在JSX中,对于禁用按钮这二者是相同的。 +; +; + +// 在JSX中,对于不禁用按钮这二者是相同的。 +; +; +``` + ### 子节点表达式 同样地,JavaScript 表达式可用于描述子结点: @@ -119,12 +204,12 @@ var content = React.createElement( ### 注释 -JSX 里添加注释很容易;它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 `{}` 包围要注释的部分。 +JSX 里添加注释很容易;它们只是 JS 表达式而已。你仅仅需要小心的是当你在一个标签的子节点块(props.children)时,要用 `{}` 包围要注释的部分。 ```javascript var content = (