docs(cn): translate content/docs/jsx-in-depth.md into Chinese #158

hstarorg · 2019-03-04T15:45:56Z

Any review and translation optimization recommendation is welcomed.

netlify · 2019-03-04T15:49:42Z

Deploy preview for cn-reactjs ready!

Built with commit 9b865a0

https://deploy-preview-158--cn-reactjs.netlify.com

netlify · 2019-03-04T15:50:57Z

Deploy preview for zh-hans-reactjs ready!

Built with commit 9b865a0

https://deploy-preview-158--zh-hans-reactjs.netlify.com

QC-L · 2019-03-05T06:10:38Z

content/docs/jsx-in-depth.md

@@ -13,15 +13,16 @@ redirect_from:
  - "docs/jsx-in-depth-ko-KR.html"
 ---

-Fundamentally, JSX just provides syntactic sugar for the `React.createElement(component, props, ...children)` function. The JSX code:
+
+实际上，JSX 仅仅只是 `React.createElement(component, props, ...children)` 函数的语法糖。如下 JSX 代码：


多了一行

当时故意的，因为在CI 构建后的预览地址中，发现首行字体会被放大，当时以为是空格问题（后来发现是样式有问题）。我会移除掉，并把commit合并为一次。

YaokaiYang-assaultmaster

这是我对于这篇翻译的一些改进想法。请多指教。

YaokaiYang-assaultmaster · 2019-03-05T08:27:49Z

content/docs/jsx-in-depth.md


-Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX `<Foo />` expression, `Foo` must be in scope.
+大写开头的 JSX 标签意味着它们是 React 组件。这些标签会被编译为对命名变量的直接引用，所以，当您使用 JSX `<Foo />` 表达式时，`Foo` 必须包含在作用域内。


如果将 大写开头的 改为 大写字母开头的 是不是会更清楚一些？

是的，这样更好，我全文没有统一，我会再调整下。

YaokaiYang-assaultmaster · 2019-03-05T08:29:24Z

content/docs/jsx-in-depth.md


-For example, both of the imports are necessary in this code, even though `React` and `CustomButton` are not directly referenced from JavaScript:
+例如， 虽然 `React` 和 `CustomButton` 都没有被直接使用，但都必须在这个代码中导入：


例如，虽然 React 和 CustomButton 都没有被直接使用，但都必须在这个代码中导入 改为 例如，在如下代码中，虽然 React 和 CustomButton 都没有被直接使用，但这二者仍然必须被导入？

已修改为：

例如，在如下代码中，虽然 React 和 CustomButton 并没有被直接使用，但还是需要导入：

YaokaiYang-assaultmaster · 2019-03-05T08:32:33Z

content/docs/jsx-in-depth.md

@@ -71,11 +72,11 @@ function WarningButton() {
 }
 ```

-If you don't use a JavaScript bundler and loaded React from a `<script>` tag, it is already in scope as the `React` global.
+如果您并不使用 JavaScript 打包工具且通过 `<script>` 标签加载 React，必须将 `React` 挂载到全局变量中。


如果您并不使用 JavaScript 打包工具且通过 <script> 标签加载 React，必须将 React 挂载到全局变量中。 --> 如果您并不使用 JavaScript 打包工具而是通过 <script> 标签加载 React，则必须将 React 挂载到全局变量中。

赞，已更正。

YaokaiYang-assaultmaster · 2019-03-05T08:35:47Z

content/docs/jsx-in-depth.md


-You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if `MyComponents.DatePicker` is a component, you can use it directly from JSX with:
+在 JSX 中，您也可以使用点表示法来引用一个 React 组件。当您在一个模块中到处许多 React 组件时，这会非常方便。例如，如果 `MyComponents.DatePicker` 是一个组件，您可以在 JSX 中直接使用：


到处 --> 导出

YaokaiYang-assaultmaster · 2019-03-05T08:36:55Z

content/docs/jsx-in-depth.md

@@ -91,49 +92,49 @@ function BlueDatePicker() {
 }
 ```

-### User-Defined Components Must Be Capitalized {#user-defined-components-must-be-capitalized}
+### 用户定义的组件必须大写开头 {#user-defined-components-must-be-capitalized}


大写开头 --> 以大写字母开头

YaokaiYang-assaultmaster · 2019-03-05T09:25:01Z

content/docs/jsx-in-depth.md

@@ -372,20 +372,20 @@ function TodoList() {
 }
 ```

-JavaScript expressions can be mixed with other types of children. This is often useful in lieu of string templates:
+JavaScript 表达式也可以和其他类型的子元素组合。通常用于替代字符串字面量：


这种做法可以方便地替代模板字符串：

YaokaiYang-assaultmaster · 2019-03-05T09:26:23Z

content/docs/jsx-in-depth.md

@@ -403,11 +403,11 @@ function ListOfTenThings() {
 }
 ```

-Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering. This usage is not common, but it works if you want to stretch what JSX is capable of.
+您可以将任何东西作为子元素传递给自定义组件，只要确保在该组件渲染之前可以被转换成 React 能够理解的事物。这种用法并不常见，但如果您要扩展 JSX，它就有用了。


只要确保在该组件被 React 渲染之前已经被转换成 React 能够理解的对象。这种做法可以用来扩展 JSX。

YaokaiYang-assaultmaster · 2019-03-05T09:27:49Z

content/docs/jsx-in-depth.md


-`false`, `null`, `undefined`, and `true` are valid children. They simply don't render. These JSX expressions will all render to the same thing:
+`false`, `null`, `undefined`, and `true` 是合法的子元素。但它们根本不会被渲染。以下的 JSX 表达式将会渲染出同样的结果：


但它们并不会被渲染。以下的 JSX 表达式渲染 结果相同 ：

YaokaiYang-assaultmaster · 2019-03-05T09:28:46Z

content/docs/jsx-in-depth.md

@@ -423,7 +423,7 @@ Children passed to a custom component can be anything, as long as that component
 <div>{true}</div>
 ```

-This can be useful to conditionally render React elements. This JSX only renders a `<Header />` if `showHeader` is `true`:
+这有助于条件渲染其他的 React 元素。在以下 JSX 中，仅当 `showHeader` = `true` 时，才会渲染 `<Header />`:


这有助于 依据特定条件来 渲染其他的 React 元素。例如在以下...

YaokaiYang-assaultmaster · 2019-03-05T09:29:48Z

content/docs/jsx-in-depth.md

@@ -432,7 +432,7 @@ This can be useful to conditionally render React elements. This JSX only renders
 </div>
 ```

-One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), such as the `0` number, are still rendered by React. For example, this code will not behave as you might expect because `0` will be printed when `props.messages` is an empty array:
+值得注意的是有一些 "falsy" 值（假值，在 JavaScript 中可能会被转换为 false 的值），如数字 0，仍然会被 React 渲染。例如，以下代码不会像您预期那样工作，当 `props.messages` 是空数组时，长度为 `0` 也会被 React 渲染：


当 props.messages 是空数组时，长度为 0 。 但该数组的长度值 0 也会被 React 渲染：

已修改为：

虽然 props.messages 是空数组时长度为 0，但 <MessageList /> 仍然会被渲染：

hstarorg · 2019-03-05T16:49:27Z

这是我对于这篇翻译的一些改进想法。请多指教。

非常感谢 @YaokaiYang-assaultmaster 耐心指导，学到很多，谢谢。

YaokaiYang-assaultmaster · 2019-03-06T07:36:10Z

我中间还有一些comments被hide了。感觉你是不是没看到呀，可以点show hidden显示。😂 @hstarorg

hstarorg · 2019-03-06T10:37:35Z

我中间还有一些comments被hide了。感觉你是不是没看到呀，可以点show hidden显示。😂 @hstarorg

看到了呀，一共30多个comment，我都有处理呢。

YaokaiYang-assaultmaster · 2019-03-07T07:13:35Z

嗷嗷不好意思我估计看错啦~

hstarorg · 2019-03-07T11:20:18Z

嗷嗷不好意思我估计看错啦~

可以在 changed Tab 里面看后续的改动。再次感谢，您的翻译更显生动。

hstarorg · 2019-03-09T01:11:40Z

This translate has any questions yet?

YaokaiYang-assaultmaster · 2019-03-09T08:04:14Z

嗷嗷不好意思我估计看错啦~

可以在 changed Tab 里面看后续的改动。再次感谢，您的翻译更显生动。

哈哈不敢当不敢当互相学习嘛

hstarorg · 2019-03-10T05:42:41Z

嗷嗷不好意思我估计看错啦~

可以在 changed Tab 里面看后续的改动。再次感谢，您的翻译更显生动。

哈哈不敢当不敢当互相学习嘛

学到了不少翻译技巧，Thanks。

hstarorg · 2019-03-15T15:43:31Z

Anyone review?

yuqingc · 2019-03-21T03:09:54Z

content/docs/jsx-in-depth.md

 function hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // 正确！这种 <div> 的使用是合法的，因为div是一个有效的HTML标记


Suggested change

// 正确！这种 <div> 的使用是合法的，因为div是一个有效的HTML标记

// 正确！这种 <div> 的使用是合法的，因为div是一个有效的 HTML 标签

yuqingc · 2019-03-21T03:10:31Z

content/docs/jsx-in-depth.md

 function Hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // 正确！ 这种<div>的使用是合法的，因为 div 是一个有效的HTML标记：


Suggested change

// 正确！这种<div>的使用是合法的，因为 div 是一个有效的HTML标记：

// 正确！这种<div>的使用是合法的，因为 div 是一个有效的 HTML 标签：

yuqingc · 2019-03-21T03:13:01Z

content/docs/jsx-in-depth.md


-You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:
+如果您想通过通用表达式来（动态）决定元素类型，您需要首先将它赋值给大写字母开头的变量。这通常用于您想根据 prop 来渲染不同组件的情况:


You cannot use a general expression as the React element type. 没有翻译

所有的“您”都改成“你”

yuqingc · 2019-03-21T03:14:48Z

content/docs/jsx-in-depth.md


+如果您没给 prop 赋值，它的默认值是 `true`。以下两个 JSX 表达式是等价的：


这几行行数没有对应上，都乱了

应该是多删了一行

yuqingc · 2019-03-21T03:16:20Z

content/docs/jsx-in-depth.md

@@ -245,7 +244,7 @@ function App2() {
 }
 ```

-You can also pick specific props that your component will consume while passing all other props using the spread operator.
+您还可以仅仅保留选择当前 组件 需要接收的 props，并使用展开操作符将其他 props 传递下去。


Suggested change

您还可以仅仅保留选择当前组件需要接收的 props，并使用展开操作符将其他 props 传递下去。

您还可以仅仅保留选择当前组件需要接收的 props，并使用展开操作符将其他 props 传递下去。

yuqingc · 2019-03-21T03:18:23Z

content/docs/jsx-in-depth.md


 ```js
 <MyComponent>foo</MyComponent>

 <MyComponent>{'foo'}</MyComponent>
 ```

-This is often useful for rendering a list of JSX expressions of arbitrary length. For example, this renders an HTML list:
+这对于展示任意长度的列表是非常有用的。例如，渲染HTML列表：


Suggested change

这对于展示任意长度的列表是非常有用的。例如，渲染HTML列表：

这对于展示任意长度的列表是非常有用的。例如，渲染 HTML 列表：

yuqingc · 2019-03-21T03:19:00Z

content/docs/jsx-in-depth.md


-Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, `props.children` works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as `props.children`:
+通常，JSX 中的 JavaScript 表达式将会被计算为字符串、React元素或者是一个列表。不过，`props.children` 和其他 prop 一样，它可以传递任意类型的数据，而不仅仅是 React 已知的可以渲染的类型。例如，如果您有一个自定义组件，您可以把回调函数作为 `props.children` 进行传递：


Suggested change

通常，JSX 中的 JavaScript 表达式将会被计算为字符串、React元素或者是一个列表。不过，`props.children` 和其他 prop 一样，它可以传递任意类型的数据，而不仅仅是 React 已知的可以渲染的类型。例如，如果您有一个自定义组件，您可以把回调函数作为 `props.children` 进行传递：

通常，JSX 中的 JavaScript 表达式将会被计算为字符串、React 元素或者是一个列表。不过，`props.children` 和其他 prop 一样，它可以传递任意类型的数据，而不仅仅是 React 已知的可以渲染的类型。例如，如果您有一个自定义组件，您可以把回调函数作为 `props.children` 进行传递：

yuqingc · 2019-03-21T03:20:21Z

content/docs/jsx-in-depth.md

@@ -423,7 +422,7 @@ Children passed to a custom component can be anything, as long as that component
 <div>{true}</div>
 ```

-This can be useful to conditionally render React elements. This JSX only renders a `<Header />` if `showHeader` is `true`:
+这有助于依据特定条件来渲染其他的 React 元素。例如，在以下 JSX 中，仅当 `showHeader` = `true` 时，才会渲染 `<Header />`:


不要用 = 号，因为 = 在计算机里一般表示赋值

Suggested change

这有助于依据特定条件来渲染其他的 React 元素。例如，在以下 JSX 中，仅当 `showHeader` = `true` 时，才会渲染 `<Header />`:

这有助于依据特定条件来渲染其他的 React 元素。例如，在以下 JSX 中，仅当 `showHeader` 为 `true` 时，才会渲染 `<Header />`:

yuqingc · 2019-03-21T03:22:21Z

content/docs/jsx-in-depth.md

@@ -432,7 +431,7 @@ This can be useful to conditionally render React elements. This JSX only renders
 </div>
 ```

-One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), such as the `0` number, are still rendered by React. For example, this code will not behave as you might expect because `0` will be printed when `props.messages` is an empty array:
+值得注意的是有一些 "falsy" 值（假值，在 JavaScript 中可能会被转换为 false 的值），如数字 0，仍然会被 React 渲染。例如，以下代码并不会像您预期那样工作，虽然 `props.messages` 是空数组时长度为 `0`，但 `<MessageList />` 仍然会被渲染：


"falsy" values 是一个超链接。需要保留

这里不需要注释，删掉，因为都有超链接里，不需要解释。超链接的内容就是解释

yuqingc · 2019-03-21T03:23:22Z

content/docs/jsx-in-depth.md

@@ -452,7 +451,7 @@ To fix this, make sure that the expression before `&&` is always boolean:
 </div>
 ```

-Conversely, if you want a value like `false`, `true`, `null`, or `undefined` to appear in the output, you have to [convert it to a string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) first:
+反之，如果您想渲染 false, true, null, undefined 等值，您需要先将它们[转换为字符串](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion)：


Suggested change

反之，如果您想渲染 false, true, null, undefined 等值，您需要先将它们[转换为字符串](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion)：

反之，如果你想渲染 `false`、`true`、`null`、`undefined` 等值，你需要先将它们[转换为字符串](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion)：

yuqingc · 2019-03-21T03:24:55Z

文中所有的“您”都改成“你”。我没有一一指出，你需要全局替换。

hstarorg · 2019-03-23T05:21:01Z

@yuqingc 感谢指出，已经更正。

yuqingc

剩下的都是一些格式的小问题。我肉眼这次也许没有找完全，你可以在你的编辑器内用相关插件或者正则匹配来统一格式化一下。没有其他的大问题了。辛苦了兄弟。

单词两边要有空格
中文超链接两边不需要空格

yuqingc · 2019-03-23T15:31:53Z

content/docs/jsx-in-depth.md

 function hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // 正确！这种 <div> 的使用是合法的，因为div是一个有效的 HTML 标签


Suggested change

// 正确！这种 <div> 的使用是合法的，因为div是一个有效的 HTML 标签

// 正确！这种 <div> 的使用是合法的，因为 div 是一个有效的 HTML 标签

yuqingc · 2019-03-23T15:35:03Z

content/docs/jsx-in-depth.md

@@ -196,43 +196,43 @@ function NumberDescriber(props) {
 }
 ```

-You can learn more about [conditional rendering](/docs/conditional-rendering.html) and [loops](/docs/lists-and-keys.html) in the corresponding sections.
+你可以在对应的章节中学习更多关于 [条件渲染](/docs/conditional-rendering.html) 和 [循环](/docs/lists-and-keys.html) 的内容。


Suggested change

你可以在对应的章节中学习更多关于 [条件渲染](/docs/conditional-rendering.html) 和 [循环](/docs/lists-and-keys.html) 的内容。

你可以在对应的章节中学习更多关于[条件渲染](/docs/conditional-rendering.html)和[循环](/docs/lists-and-keys.html)的内容。

yuqingc · 2019-03-23T15:36:31Z

content/docs/jsx-in-depth.md


 ```js
 <MyTextBox autocomplete />

 <MyTextBox autocomplete={true} />
 ```

-In general, we don't recommend using this because it can be confused with the [ES6 object shorthand](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` which is short for `{foo: foo}` rather than `{foo: true}`. This behavior is just there so that it matches the behavior of HTML.
+通常，我们不建议这样使用，因为它可能与 [ES6对象简写](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) 混淆， `{foo}` 是 `{foo: foo}` 的简写，而不是 `{foo: true}`。这样实现只是为了保持和 HTML 中标签属性的行为一致。


Suggested change

通常，我们不建议这样使用，因为它可能与 [ES6对象简写](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) 混淆， `{foo}` 是 `{foo: foo}` 的简写，而不是 `{foo: true}`。这样实现只是为了保持和 HTML 中标签属性的行为一致。

通常，我们不建议这样使用，因为它可能与 [ES6 对象简写](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) 混淆，`{foo}` 是 `{foo: foo}` 的简写，而不是 `{foo: true}`。这样实现只是为了保持和 HTML 中标签属性的行为一致。

yuqingc · 2019-03-23T15:37:35Z

content/docs/jsx-in-depth.md

@@ -319,7 +319,7 @@ You can provide more JSX elements as the children. This is useful for displaying
 </MyContainer>
 ```

-You can mix together different types of children, so you can use string literals together with JSX children. This is another way in which JSX is like HTML, so that this is both valid JSX and valid HTML:
+你可以将不同类型的子元素混合在一起，因此你可以将字符串字面量与 JSX 子元素一起使用。这也是 JSX 类似 HTML 的一种表现，所以如下是合法的 JSX 也是合法的HTML：


Suggested change

你可以将不同类型的子元素混合在一起，因此你可以将字符串字面量与 JSX 子元素一起使用。这也是 JSX 类似 HTML 的一种表现，所以如下是合法的 JSX 也是合法的HTML：

你可以将不同类型的子元素混合在一起，因此你可以将字符串字面量与 JSX 子元素一起使用。这也是 JSX 类似 HTML 的一种表现，所以如下是合法的 JSX 也是合法的 HTML：

hstarorg · 2019-03-23T16:36:26Z

@yuqingc 感谢，已经按照规则重新检查了一次。

QC-L

Nice Work!
LGTM

QC-L · 2019-03-27T06:08:17Z

@hstarorg 查看邮件，我给你发了个群二维码。

QC-L · 2019-03-27T06:12:44Z

@YaokaiYang-assaultmaster 也给我个你的邮箱链接呗？

YaokaiYang-assaultmaster · 2019-03-28T06:29:08Z

@QC-L 没问题发到你Github首页那个邮箱里啦。

hstarorg · 2019-03-28T08:13:34Z

@hstarorg 查看邮件，我给你发了个群二维码。

收到，Thanks。

QC-L · 2019-03-28T08:27:04Z

@YaokaiYang-assaultmaster 回复你了，查收~

…s#158)

hstarorg marked this pull request as ready for review March 4, 2019 16:31

QC-L added the Pending Review 已翻译，待校对阶段 label Mar 5, 2019

QC-L reviewed Mar 5, 2019

View reviewed changes

QC-L mentioned this pull request Mar 5, 2019

OLD CLAIMS #4

Closed

YaokaiYang-assaultmaster reviewed Mar 5, 2019

View reviewed changes

hstarorg force-pushed the master branch from 485ec48 to 61bf036 Compare March 5, 2019 17:23

hstarorg mentioned this pull request Mar 7, 2019

Please ignore this issue. #160

Closed

yuqingc requested changes Mar 21, 2019

View reviewed changes

yuqingc requested changes Mar 23, 2019

View reviewed changes

translate content/docs/jsx-in-depth.md

9b865a0

hstarorg force-pushed the master branch from eb30a2e to 9b865a0 Compare March 23, 2019 16:45

yuqingc approved these changes Mar 24, 2019

View reviewed changes

yuqingc added Pending Re-Review 已修改，待审校阶段 and removed Pending Review 已翻译，待校对阶段 labels Mar 24, 2019

QC-L approved these changes Mar 27, 2019

View reviewed changes

QC-L merged commit 80a04f7 into reactjs:master Mar 27, 2019

OhIAmFine pushed a commit to OhIAmFine/zh-hans.reactjs.org that referenced this pull request May 6, 2019

docs(cn): translate content/docs/jsx-in-depth.md into Chinese (reactj…

db249fb

…s#158)


		Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX `<Foo />` expression, `Foo` must be in scope.
		大写开头的 JSX 标签意味着它们是 React 组件。这些标签会被编译为对命名变量的直接引用，所以，当您使用 JSX `<Foo />` 表达式时，`Foo` 必须包含在作用域内。


		For example, both of the imports are necessary in this code, even though `React` and `CustomButton` are not directly referenced from JavaScript:
		例如，虽然 `React` 和 `CustomButton` 都没有被直接使用，但都必须在这个代码中导入：


		You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if `MyComponents.DatePicker` is a component, you can use it directly from JSX with:
		在 JSX 中，您也可以使用点表示法来引用一个 React 组件。当您在一个模块中到处许多 React 组件时，这会非常方便。例如，如果 `MyComponents.DatePicker` 是一个组件，您可以在 JSX 中直接使用：


		`false`, `null`, `undefined`, and `true` are valid children. They simply don't render. These JSX expressions will all render to the same thing:
		`false`, `null`, `undefined`, and `true` 是合法的子元素。但它们根本不会被渲染。以下的 JSX 表达式将会渲染出同样的结果：

	// 正确！这种 <div> 的使用是合法的，因为div是一个有效的HTML标记
	// 正确！这种 <div> 的使用是合法的，因为div是一个有效的 HTML 标签

	// 正确！这种<div>的使用是合法的，因为 div 是一个有效的HTML标记：
	// 正确！这种<div>的使用是合法的，因为 div 是一个有效的 HTML 标签：


		You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:
		如果您想通过通用表达式来（动态）决定元素类型，您需要首先将它赋值给大写字母开头的变量。这通常用于您想根据 prop 来渲染不同组件的情况:


		如果您没给 prop 赋值，它的默认值是 `true`。以下两个 JSX 表达式是等价的：

	您还可以仅仅保留选择当前组件需要接收的 props，并使用展开操作符将其他 props 传递下去。
	您还可以仅仅保留选择当前组件需要接收的 props，并使用展开操作符将其他 props 传递下去。

	这对于展示任意长度的列表是非常有用的。例如，渲染HTML列表：
	这对于展示任意长度的列表是非常有用的。例如，渲染 HTML 列表：


		Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, `props.children` works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as `props.children`:
		通常，JSX 中的 JavaScript 表达式将会被计算为字符串、React元素或者是一个列表。不过，`props.children` 和其他 prop 一样，它可以传递任意类型的数据，而不仅仅是 React 已知的可以渲染的类型。例如，如果您有一个自定义组件，您可以把回调函数作为 `props.children` 进行传递：

	通常，JSX 中的 JavaScript 表达式将会被计算为字符串、React元素或者是一个列表。不过，`props.children` 和其他 prop 一样，它可以传递任意类型的数据，而不仅仅是 React 已知的可以渲染的类型。例如，如果您有一个自定义组件，您可以把回调函数作为 `props.children` 进行传递：
	通常，JSX 中的 JavaScript 表达式将会被计算为字符串、React 元素或者是一个列表。不过，`props.children` 和其他 prop 一样，它可以传递任意类型的数据，而不仅仅是 React 已知的可以渲染的类型。例如，如果您有一个自定义组件，您可以把回调函数作为 `props.children` 进行传递：

	这有助于依据特定条件来渲染其他的 React 元素。例如，在以下 JSX 中，仅当 `showHeader` = `true` 时，才会渲染 `<Header />`:
	这有助于依据特定条件来渲染其他的 React 元素。例如，在以下 JSX 中，仅当 `showHeader` 为 `true` 时，才会渲染 `<Header />`:

	反之，如果您想渲染 false, true, null, undefined 等值，您需要先将它们[转换为字符串](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion)：
	反之，如果你想渲染 `false`、`true`、`null`、`undefined` 等值，你需要先将它们[转换为字符串](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion)：

	// 正确！这种 <div> 的使用是合法的，因为div是一个有效的 HTML 标签
	// 正确！这种 <div> 的使用是合法的，因为 div 是一个有效的 HTML 标签

	你可以在对应的章节中学习更多关于 [条件渲染](/docs/conditional-rendering.html) 和 [循环](/docs/lists-and-keys.html) 的内容。
	你可以在对应的章节中学习更多关于[条件渲染](/docs/conditional-rendering.html)和[循环](/docs/lists-and-keys.html)的内容。

	通常，我们不建议这样使用，因为它可能与 [ES6对象简写](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) 混淆， `{foo}` 是 `{foo: foo}` 的简写，而不是 `{foo: true}`。这样实现只是为了保持和 HTML 中标签属性的行为一致。
	通常，我们不建议这样使用，因为它可能与 [ES6 对象简写](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) 混淆，`{foo}` 是 `{foo: foo}` 的简写，而不是 `{foo: true}`。这样实现只是为了保持和 HTML 中标签属性的行为一致。

	你可以将不同类型的子元素混合在一起，因此你可以将字符串字面量与 JSX 子元素一起使用。这也是 JSX 类似 HTML 的一种表现，所以如下是合法的 JSX 也是合法的HTML：
	你可以将不同类型的子元素混合在一起，因此你可以将字符串字面量与 JSX 子元素一起使用。这也是 JSX 类似 HTML 的一种表现，所以如下是合法的 JSX 也是合法的 HTML：

docs(cn): translate content/docs/jsx-in-depth.md into Chinese #158

docs(cn): translate content/docs/jsx-in-depth.md into Chinese #158

Conversation

hstarorg commented Mar 4, 2019

netlify bot commented Mar 4, 2019 • edited

netlify bot commented Mar 4, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

YaokaiYang-assaultmaster left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hstarorg commented Mar 5, 2019

YaokaiYang-assaultmaster commented Mar 6, 2019 • edited

hstarorg commented Mar 6, 2019

YaokaiYang-assaultmaster commented Mar 7, 2019

hstarorg commented Mar 7, 2019

hstarorg commented Mar 9, 2019

YaokaiYang-assaultmaster commented Mar 9, 2019

hstarorg commented Mar 10, 2019

hstarorg commented Mar 15, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yuqingc commented Mar 21, 2019

hstarorg commented Mar 23, 2019

yuqingc left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hstarorg commented Mar 23, 2019

QC-L left a comment

Choose a reason for hiding this comment

QC-L commented Mar 27, 2019 • edited

QC-L commented Mar 27, 2019

YaokaiYang-assaultmaster commented Mar 28, 2019

hstarorg commented Mar 28, 2019

QC-L commented Mar 28, 2019

netlify bot commented Mar 4, 2019 •

edited

netlify bot commented Mar 4, 2019 •

edited

YaokaiYang-assaultmaster commented Mar 6, 2019 •

edited

yuqingc left a comment •

edited

QC-L commented Mar 27, 2019 •

edited