From 739f9492e961a5ad8d532d86ccf04cc3c13f072d Mon Sep 17 00:00:00 2001
From: flynn-eye <939649107@qq.com>
Date: Sat, 20 Nov 2021 22:05:53 +0800
Subject: [PATCH 1/5] docs(cn): learn/javascript-in-jsx-with-curly-braces

---
 .../javascript-in-jsx-with-curly-braces.md    | 112 +++++++++---------
 1 file changed, 56 insertions(+), 56 deletions(-)

diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
index 6572c23fad..7c75ea21fb 100644
--- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
+++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
@@ -1,25 +1,25 @@
 ---
-title: JavaScript in JSX with Curly Braces
+title: 在 JSX 的花括号内使用 JavaScript
 ---
 
 <Intro>
 
-JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript.
+JSX 允许你在 JavaScript 中编写类似 HTML 的标记，让渲染逻辑和内容在同一处地方。有些情况下，你想在一处标记中添加一些 JavaScript 逻辑或者引用动态属性。这种情况下，你可以在 JSX 的花括号内来编写 JavaScript。
 
 </Intro>
 
 <YouWillLearn>
 
-* How to pass strings with quotes
-* How to reference a JavaScript variable inside JSX with curly braces
-* How to call a JavaScript function inside JSX with curly braces
-* How to use a JavaScript object inside JSX with curly braces
+* 如何使用引号传递字符串
+* 在 JSX 的花括号内引用 JavaScript 变量
+* 在 JSX 的花括号内调用 JavaScript 函数
+* 在 JSX 的花括号内使用 JavaScript 对象
 
 </YouWillLearn>
 
-## Passing strings with quotes {/*passing-strings-with-quotes*/}
+## 使用引号传递字符串 {/*passing-strings-with-quotes*/}
 
-When you want to pass a string attribute to JSX, you put it in single or double quotes:
+当你想传递一个字符串属性给 JSX 时，把它放到单引号或双引号中：
 
 <Sandpack>
 
@@ -41,9 +41,9 @@ export default function Avatar() {
 
 </Sandpack>
 
-Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings.
+在此处，`"https://i.imgur.com/7vQD0fPs.jpg"` 和 `"Gregorio Y. Zara"` 作为字符串被传递。
 
-But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**:
+但是如果你想动态指定 `src` 或 `alt` 该怎么办？你可以**使用 `{` 和 `}` 替代 `"` 和 `"` 来引用 JavaScript 的一个值**：
 
 <Sandpack>
 
@@ -67,11 +67,11 @@ export default function Avatar() {
 
 </Sandpack>
 
-Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup!
+注意 `className="avatar"` 和 `src={avatar}` 之间的区别，`className="avatar"` 声明了一个叫 `"avatar"` 的 CSS 类名让图片变圆，而 `src={avatar}` 读取了 JavaScript 中一个叫做 `avatar` 的变量的值。正是因为花括号让 JavaScript 可以在你的标记中生效！
 
-## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/}
+## 使用花括号：一扇进入 JavaScript 世界的窗户 {/*using-curly-braces-a-window-into-the-javascript-world*/}
 
-JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `<h1>`:
+JSX 是一种编写 JavaScript 的特殊方式。它意味着在花括号 `{ }` 中使用 JavaScript 成为可能。下面的例子中声明了科学家的名字，`name`，然后在 `<h1>` 后的花括号内嵌入它：
 
 <Sandpack>
 
@@ -86,9 +86,9 @@ export default function TodoList() {
 
 </Sandpack>
 
-Try changing `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the To Do List title changes?
+尝试将 `name` 的值从 `'Gregorio Y. Zara'` 更改成 `'Hedy Lamarr'`。看看这个 To Do List 的标题如何变化？
 
-Any JavaScript expression will work between curly braces, including function calls like `formatDate()`:
+任何花括号内的 JavaScript 表达式都会工作，包括 像 `formatDate()` 这样的函数调用：
 
 <Sandpack>
 
@@ -111,18 +111,18 @@ export default function TodoList() {
 
 </Sandpack>
 
-### Where to use curly braces {/*where-to-use-curly-braces*/}
+### 可以在哪使用花括号 {/*where-to-use-curly-braces*/}
 
-You can only use curly braces in two ways inside JSX:
+在 JSX 中只能以下面两种方式使用花括号：
 
-1. **As text** directly inside a JSX tag: `<h1>{name}'s To Do List</h1>` works, but `<{tag}>Gregorio Y. Zara's To Do List</{tag}>`  will not.
-2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `{avatar}`.
+1. 用作 JSX 标签内的**文本**：`<h1>{name}'s To Do List</h1>` 是有效的，但是 `<{tag}>Gregorio Y. Zara's To Do List</{tag}>` 无效。
+2. 用作紧跟在 `=` 符号后的**属性**：`src={avatar}` 会读取 `avatar` 的值，但是 `src="{avatar}"` 会传一个叫做 `{avatar}` 的字符串的值。
 
-## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
+## 使用 "双花括号"：JSX 中的 CSS 和 对象 {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 
-In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
+除了字符串、数字和其它 JavaScript 表达式，你甚至可以在 JSX 中传递对象。对象也用花括号表示，例如 `{ name: "Hedy Lamarr", inventions: 5 }`。因此，为了在 JSX 中传递对象，你必须用另一对花括号包裹对象：`person={{ name: "Hedy Lamarr", inventions: 5 }}`。
 
-You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute:
+你也许看到了内联在 JSX 中的 CSS 样式。React 不强制你使用内联样式（CSS 类适用于大多数情况）。但是当你需要内联样式的时候，你可以传递一个对象给 `style` 属性：
 
 <Sandpack>
 
@@ -148,9 +148,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 </Sandpack>
 
-Try changing the values of `backgroundColor` and `color`.
+尝试更改 `backgroundColor` 和 `color` 的值。
 
-You can really see the JavaScript object inside the curly braces when you write it like this:
+当你像下面的例子那样写时，你真的可以发现花括号内的对象：
 
 ```js {2-5}
 <ul style={
@@ -161,17 +161,17 @@ You can really see the JavaScript object inside the curly braces when you write
 }>
 ```
 
-The next time you see `{{` and `}}` in JSX, know that it's nothing more than an object inside the JSX curlies!
+当你下次在 JSX 中看到 `{{` 和 `}}`，要知道它只不过是 JSX 花括号里的一个对象！
 
 <Gotcha>
 
-Inline `style` properties are written in camelCase. For example, HTML `<ul style="background-color: black"`> would be written as `<ul style={{ backgroundColor: 'black' }}>`  in your component.
+内联 `style` 属性 使用驼峰命名法编写。例如，HTML `<ul style="background-color: black"`> 在你的组件里应该写成 `<ul style={{ backgroundColor: 'black' }}>`。
 
 </Gotcha>
 
-## More fun with JavaScript objects and curly braces {/*more-fun-with-javascript-objects-and-curly-braces*/}
+## JavaScript 对象 和 花括号的更多可能 {/*more-fun-with-javascript-objects-and-curly-braces*/}
 
-You can move several expressions into one object, and reference them in your JSX inside curly braces:
+你可以将多个表达式合并到一个对象中，在 JSX 内的花括号内引用它们：
 
 <Sandpack>
 
@@ -211,7 +211,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-In this example, the `person` JavaScript object contains a `name` string and a `theme` object:
+在这个例子中，`person` JavaScript 对象包含 `name` 字符串和 `theme` 对象：
 
 ```js
 const person = {
@@ -223,31 +223,31 @@ const person = {
 };
 ```
 
-The component can use these values from `person` like so:
+该组件可以这样使用来自 `person` 的值：
 
 ```js
 <div style={person.theme}>
   <h1>{person.name}'s Todos</h1>
 ```
 
-JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript.
+JSX 是一个十分简洁的模板语言，因为它允许你使用 JavaScript 组织数据和逻辑。
 
 <Recap>
 
-Now you know almost everything about JSX:
+现在你几乎了解了 JSX 的一切：
 
-* JSX attributes inside quotes are passed as strings.
-* Curly braces let you bring JavaScript logic and variables into your markup.
-* They work inside the JSX tag content or immediately after `=` in attributes.
-* `{{` and `}}` is not special syntax: it's a JavaScript object tucked inside JSX curly braces.
+* JSX 引号内的值作为字符串传递给属性。
+* 花括号让你可以将 JavaScript 的逻辑和变量带入你的标记中。
+* 它们在 JSX 标签中的内容或紧随属性后的 `=` 有效。
+* `{{` 和 `}}` 不是特殊语法：它是在 JSX 花括号内的 JavaScript 对象。
 
 </Recap>
 
 <Challenges>
 
-### Fix the mistake {/*fix-the-mistake*/}
+### 修复错误 {/*fix-the-mistake*/}
 
-This code crashes with an error saying `Objects are not valid as a React child`:
+此代码崩溃并显示 `Objects are not valid as a React child`：
 
 <Sandpack>
 
@@ -287,15 +287,15 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Can you find the problem?
+你能找到问题吗？
 
-<Hint>Look for what's inside the curly braces. Are we putting the right thing there?</Hint>
+<Hint>看看花括号内的内容。我们放那的东西对吗？</Hint>
 
 <Solution>
 
-This is happening because this example renders *an object itself* into the markup rather than a string: `<h1>{person}'s Todos</h1>` is trying to render the entire `person` object! Including raw objects as text content throws an error because React doesn't know how you want to display them.
+之所以发生这样的问题是因为例子尝试把*一个对象*渲染进标记内而不是一个字符串：`<h1>{person}'s Todos</h1>` 尝试渲染整个 `person` 对象！未经处理的对象作为文本内容将会抛出错误，因为 React 不知道你想如何显示它们。
 
-To fix it, replace `<h1>{person}'s Todos</h1>` with `<h1>{person.name}'s Todos</h1>`:
+要修复它，请把 `<h1>{person}'s Todos</h1>` 替换成 `<h1>{person.name}'s Todos</h1>`：
 
 <Sandpack>
 
@@ -337,9 +337,9 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-### Extract information into an object {/*extract-information-into-an-object*/}
+### 提取信息到对象中 {/*extract-information-into-an-object*/}
 
-Extract the image URL into the `person` object.
+提取图片 URL 信息到 `person` 对象中。
 
 <Sandpack>
 
@@ -381,7 +381,7 @@ body > div > div { padding: 20px; }
 
 <Solution>
 
-Move the image URL into a property called `person.imageUrl` and read it from the `<img>` tag using the curlies:
+把图片 URL 移到一个叫做 `person.imageUrl` 的属性中并在 `<img>` 标签中的花括号中读取它：
 
 <Sandpack>
 
@@ -424,13 +424,13 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-### Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/}
+### 在 JSX 花括号内写一个表达式 {/*write-an-expression-inside-jsx-curly-braces*/}
 
-In the object below, the full image URL is split into four parts: base URL,  `imageId`, `imageSize`, and file extension.
+在下面的对象中，完整的图片 URL 分成四部分：base URL、 `imageId`、 `imageSize` 和文件拓展名。
 
-We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `<img>` tag specifies its `src`.
+我们希望这些属性组合成图片的 URL：base URL（一直是 `'https://i.imgur.com/'`）、`imageId`（`'7vQD0fP'`）、`imageSize`（`'s'`）和文件拓展（总是 `'.jpg'`）。但是，`<img>` 标签 `src` 指明的方式是有问题的。
 
-Can you fix it?
+你能修复它吗？
 
 <Sandpack>
 
@@ -474,15 +474,15 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-To check that your fix worked, try changing the value of `imageSize` to `'b'`. The image should resize after your edit.
+要检查你的修复是否成功，尝试吧 `imageSize` 的值改成 `'b'`。在你编辑后图像应该会调整大小。
 
 <Solution>
 
-You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
+你可以这样写 `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`。
 
-1. `{` opens the JavaScript expression
-2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string
-3. `}` closes the JavaScript expression
+1. `{` 开启 JavaScript 表达式
+2. `baseUrl + person.imageId + person.imageSize + '.jpg'` 提供正确的 URL 字符串
+3. `}` 结束 JavaScript 表达式
 
 <Sandpack>
 
@@ -525,7 +525,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-You can also move this expression into a separate function like `getImageUrl` below:
+你还可以将此表达式封装成一个单独的函数，例如下面的 `getImageUrl`：
 
 <Sandpack>
 
@@ -580,7 +580,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Variables and functions can help you keep the markup simple!
+变量和函数可以帮助你保持标记文本的简洁！
 
 </Solution>
 

From 2148cbecc17f029fda24ec8d9f26baddfb84f33e Mon Sep 17 00:00:00 2001
From: flynn-eye <939649107@qq.com>
Date: Wed, 8 Dec 2021 21:23:25 +0800
Subject: [PATCH 2/5] =?UTF-8?q?docs(cn):=20=E6=8C=89=E7=85=A7=E5=BB=BA?=
 =?UTF-8?q?=E8=AE=AE=E8=BF=9B=E8=A1=8C=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/learn/javascript-in-jsx-with-curly-braces.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
index 7c75ea21fb..376f6d5b37 100644
--- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
+++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
@@ -4,7 +4,7 @@ title: 在 JSX 的花括号内使用 JavaScript
 
 <Intro>
 
-JSX 允许你在 JavaScript 中编写类似 HTML 的标记，让渲染逻辑和内容在同一处地方。有些情况下，你想在一处标记中添加一些 JavaScript 逻辑或者引用动态属性。这种情况下，你可以在 JSX 的花括号内来编写 JavaScript。
+JSX 允许你在 JavaScript 中编写类似 HTML 的标记，从而使渲染的逻辑和内容可以写在一起。有时候，你可能想要在标记中添加一些 JavaScript 逻辑或者引用动态的属性。这种情况下，你可以在 JSX 的花括号内来编写 JavaScript。
 
 </Intro>
 
@@ -19,7 +19,7 @@ JSX 允许你在 JavaScript 中编写类似 HTML 的标记，让渲染逻辑和
 
 ## 使用引号传递字符串 {/*passing-strings-with-quotes*/}
 
-当你想传递一个字符串属性给 JSX 时，把它放到单引号或双引号中：
+当你想把一个字符串属性传递给 JSX 时，把它放到单引号或双引号中：
 
 <Sandpack>
 
@@ -41,9 +41,9 @@ export default function Avatar() {
 
 </Sandpack>
 
-在此处，`"https://i.imgur.com/7vQD0fPs.jpg"` 和 `"Gregorio Y. Zara"` 作为字符串被传递。
+这里的 `"https://i.imgur.com/7vQD0fPs.jpg"` 和 `"Gregorio Y. Zara"` 就是被作为字符串传递的。
 
-但是如果你想动态指定 `src` 或 `alt` 该怎么办？你可以**使用 `{` 和 `}` 替代 `"` 和 `"` 来引用 JavaScript 的一个值**：
+但是如果你想要动态地指定 `src` 或 `alt` 的值呢？你可以 **用 `{` 和 `}` 替代 `"` 和 `"` 以使用 JavaScript 变量** ：
 
 <Sandpack>
 
@@ -67,7 +67,7 @@ export default function Avatar() {
 
 </Sandpack>
 
-注意 `className="avatar"` 和 `src={avatar}` 之间的区别，`className="avatar"` 声明了一个叫 `"avatar"` 的 CSS 类名让图片变圆，而 `src={avatar}` 读取了 JavaScript 中一个叫做 `avatar` 的变量的值。正是因为花括号让 JavaScript 可以在你的标记中生效！
+请注意 `className="avatar"` 和 `src={avatar}` 之间的区别，`className="avatar"` 指定了一个就叫 `"avatar"` 的使图片在样式上变圆的 CSS 类名，而 `src={avatar}` 这种写法会去读取 JavaScript 中 `avatar` 这个变量的值。这是因为花括号可以使你直接在标签中使用 JavaScript！
 
 ## 使用花括号：一扇进入 JavaScript 世界的窗户 {/*using-curly-braces-a-window-into-the-javascript-world*/}
 

From b4d4be12f4f2039b88c5cde7fb63e243a92852dc Mon Sep 17 00:00:00 2001
From: flynn-eye <939649107@qq.com>
Date: Wed, 8 Dec 2021 23:14:27 +0800
Subject: [PATCH 3/5] Apply suggestions from code review

Co-authored-by: ZhengX <56376387+Megrax@users.noreply.github.com>
---
 .../javascript-in-jsx-with-curly-braces.md    | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
index 376f6d5b37..cc8fe04e65 100644
--- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
+++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
@@ -71,7 +71,7 @@ export default function Avatar() {
 
 ## 使用花括号：一扇进入 JavaScript 世界的窗户 {/*using-curly-braces-a-window-into-the-javascript-world*/}
 
-JSX 是一种编写 JavaScript 的特殊方式。它意味着在花括号 `{ }` 中使用 JavaScript 成为可能。下面的例子中声明了科学家的名字，`name`，然后在 `<h1>` 后的花括号内嵌入它：
+JSX 是一种编写 JavaScript 的特殊方式。这为在花括号 `{ }` 中使用 JavaScript 带来了可能。下面的例子中声明了科学家的名字，`name`，然后在 `<h1>` 后的花括号内嵌入它：
 
 <Sandpack>
 
@@ -86,9 +86,9 @@ export default function TodoList() {
 
 </Sandpack>
 
-尝试将 `name` 的值从 `'Gregorio Y. Zara'` 更改成 `'Hedy Lamarr'`。看看这个 To Do List 的标题如何变化？
+试着将 `name` 的值从 `'Gregorio Y. Zara'` 更改成 `'Hedy Lamarr'`。看看这个 To Do List 的标题将如何变化？
 
-任何花括号内的 JavaScript 表达式都会工作，包括 像 `formatDate()` 这样的函数调用：
+花括号内的任何 JavaScript 表达式都能正常运行，包括像 `formatDate()` 这样的函数调用：
 
 <Sandpack>
 
@@ -116,13 +116,13 @@ export default function TodoList() {
 在 JSX 中只能以下面两种方式使用花括号：
 
 1. 用作 JSX 标签内的**文本**：`<h1>{name}'s To Do List</h1>` 是有效的，但是 `<{tag}>Gregorio Y. Zara's To Do List</{tag}>` 无效。
-2. 用作紧跟在 `=` 符号后的**属性**：`src={avatar}` 会读取 `avatar` 的值，但是 `src="{avatar}"` 会传一个叫做 `{avatar}` 的字符串的值。
+2. 用作紧跟在 `=` 符号后的 **属性**：`src={avatar}` 会读取 `avatar` 变量，但是 `src="{avatar}"` 只会传一个字符串 `{avatar}`。
 
 ## 使用 "双花括号"：JSX 中的 CSS 和 对象 {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 
-除了字符串、数字和其它 JavaScript 表达式，你甚至可以在 JSX 中传递对象。对象也用花括号表示，例如 `{ name: "Hedy Lamarr", inventions: 5 }`。因此，为了在 JSX 中传递对象，你必须用另一对花括号包裹对象：`person={{ name: "Hedy Lamarr", inventions: 5 }}`。
+除了字符串、数字和其它 JavaScript 表达式，你甚至可以在 JSX 中传递对象。对象也用花括号表示，例如 `{ name: "Hedy Lamarr", inventions: 5 }`。因此，为了能在 JSX 中传递，你必须用另一对额外的花括号包裹对象：`person={{ name: "Hedy Lamarr", inventions: 5 }}`。
 
-你也许看到了内联在 JSX 中的 CSS 样式。React 不强制你使用内联样式（CSS 类适用于大多数情况）。但是当你需要内联样式的时候，你可以传递一个对象给 `style` 属性：
+你可能在 JSX 的内联 CSS 样式中就已经见过这种写法了。React 不要求你使用内联样式（使用 CSS 类就能满足大部分情况）。但是当你需要内联样式的时候，你可以给 `style` 属性传递一个对象：
 
 <Sandpack>
 
@@ -148,9 +148,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 </Sandpack>
 
-尝试更改 `backgroundColor` 和 `color` 的值。
+试着更改一下 `backgroundColor` 和 `color` 的值。
 
-当你像下面的例子那样写时，你真的可以发现花括号内的对象：
+当你写成这样时，你可以很清楚地看到花括号里包着的对象：
 
 ```js {2-5}
 <ul style={
@@ -161,7 +161,7 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 }>
 ```
 
-当你下次在 JSX 中看到 `{{` 和 `}}`，要知道它只不过是 JSX 花括号里的一个对象！
+所以当你下次在 JSX 中看到 `{{` 和 `}}`时，就知道它只不过是包在花括号里的一个对象罢了！
 
 <Gotcha>
 
@@ -171,7 +171,7 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 ## JavaScript 对象 和 花括号的更多可能 {/*more-fun-with-javascript-objects-and-curly-braces*/}
 
-你可以将多个表达式合并到一个对象中，在 JSX 内的花括号内引用它们：
+你可以将多个表达式合并到一个对象中，在 JSX 的花括号内分别使用它们：
 
 <Sandpack>
 
@@ -211,7 +211,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-在这个例子中，`person` JavaScript 对象包含 `name` 字符串和 `theme` 对象：
+在这个例子里，`person` JavaScript 对象包含 `name` 中存储的字符串和 `theme` 对象：
 
 ```js
 const person = {
@@ -230,16 +230,16 @@ const person = {
   <h1>{person.name}'s Todos</h1>
 ```
 
-JSX 是一个十分简洁的模板语言，因为它允许你使用 JavaScript 组织数据和逻辑。
+JSX 是一种模板语言的最小实现，因为它允许你通过 JavaScript 来组织数据和逻辑。
 
 <Recap>
 
-现在你几乎了解了 JSX 的一切：
+现在你几乎了解了有关 JSX 的一切：
 
-* JSX 引号内的值作为字符串传递给属性。
-* 花括号让你可以将 JavaScript 的逻辑和变量带入你的标记中。
-* 它们在 JSX 标签中的内容或紧随属性后的 `=` 有效。
-* `{{` 和 `}}` 不是特殊语法：它是在 JSX 花括号内的 JavaScript 对象。
+* JSX 引号内的值会作为字符串传递给属性。
+* 花括号让你可以将 JavaScript 的逻辑和变量带入到标签中。
+* 它们会在 JSX 标签中的内容区域或紧随属性的 `=` 后起作用。
+* `{{` 和 `}}` 并不是什么特殊的语法：它只是包在 JSX 花括号内的 JavaScript 对象。
 
 </Recap>
 
@@ -247,7 +247,7 @@ JSX 是一个十分简洁的模板语言，因为它允许你使用 JavaScript 
 
 ### 修复错误 {/*fix-the-mistake*/}
 
-此代码崩溃并显示 `Objects are not valid as a React child`：
+这段代码崩溃了，并打印出这样一个错误 `Objects are not valid as a React child`：
 
 <Sandpack>
 
@@ -287,13 +287,13 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-你能找到问题吗？
+你能找到问题出在哪吗？
 
-<Hint>看看花括号内的内容。我们放那的东西对吗？</Hint>
+<Hint>注意看花括号里的内容，我们放在那的东西有没有什么问题？</Hint>
 
 <Solution>
 
-之所以发生这样的问题是因为例子尝试把*一个对象*渲染进标记内而不是一个字符串：`<h1>{person}'s Todos</h1>` 尝试渲染整个 `person` 对象！未经处理的对象作为文本内容将会抛出错误，因为 React 不知道你想如何显示它们。
+之所以会出现这个问题是因为示例中的代码尝试把 *一个对象* 而不是一个字符串渲染在标签内：`<h1>{person}'s Todos</h1>` 在试图渲染整个 `person` 对象！将未经处理的对象作为文本内容使用会抛出错误，因为 React 并不知道你想如何展示它们。
 
 要修复它，请把 `<h1>{person}'s Todos</h1>` 替换成 `<h1>{person.name}'s Todos</h1>`：
 
@@ -339,7 +339,7 @@ body > div > div { padding: 20px; }
 
 ### 提取信息到对象中 {/*extract-information-into-an-object*/}
 
-提取图片 URL 信息到 `person` 对象中。
+把图片的 URL 信息提取到 `person` 对象中。
 
 <Sandpack>
 
@@ -381,7 +381,7 @@ body > div > div { padding: 20px; }
 
 <Solution>
 
-把图片 URL 移到一个叫做 `person.imageUrl` 的属性中并在 `<img>` 标签中的花括号中读取它：
+把图片 URL 移到 `person.imageUrl` 这个属性中并在 `<img>` 标签中的花括号中读取它：
 
 <Sandpack>
 
@@ -426,7 +426,7 @@ body > div > div { padding: 20px; }
 
 ### 在 JSX 花括号内写一个表达式 {/*write-an-expression-inside-jsx-curly-braces*/}
 
-在下面的对象中，完整的图片 URL 分成四部分：base URL、 `imageId`、 `imageSize` 和文件拓展名。
+在下面的对象中，完整的图片 URL 被分成了四个部分：base URL、 `imageId`、 `imageSize` 和文件拓展名。
 
 我们希望这些属性组合成图片的 URL：base URL（一直是 `'https://i.imgur.com/'`）、`imageId`（`'7vQD0fP'`）、`imageSize`（`'s'`）和文件拓展（总是 `'.jpg'`）。但是，`<img>` 标签 `src` 指明的方式是有问题的。
 
@@ -474,14 +474,14 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-要检查你的修复是否成功，尝试吧 `imageSize` 的值改成 `'b'`。在你编辑后图像应该会调整大小。
+要检查你的修复是否成功，可以尝试把 `imageSize` 的值改成 `'b'`。这张图片的大小理应随着你的修改而发生变化。
 
 <Solution>
 
-你可以这样写 `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`。
+你可以把它写成 `src={baseUrl + person.imageId + person.imageSize + '.jpg'}` 这样。
 
 1. `{` 开启 JavaScript 表达式
-2. `baseUrl + person.imageId + person.imageSize + '.jpg'` 提供正确的 URL 字符串
+2. `baseUrl + person.imageId + person.imageSize + '.jpg'` 会生成正确的 URL 字符串
 3. `}` 结束 JavaScript 表达式
 
 <Sandpack>

From 525355600893d2ac9f1a0efec5e17d6fb618d6c5 Mon Sep 17 00:00:00 2001
From: flynn-eye <939649107@qq.com>
Date: Sat, 18 Dec 2021 09:54:02 +0800
Subject: [PATCH 4/5] Update
 beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md

Co-authored-by: ZhengX <56376387+Megrax@users.noreply.github.com>
---
 beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
index cc8fe04e65..0b068f1b5d 100644
--- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
+++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
@@ -1,5 +1,8 @@
 ---
 title: 在 JSX 的花括号内使用 JavaScript
+translators:
+  - flynn-eye
+  - Megrax
 ---
 
 <Intro>

From 70fec32bb19063ec115a4f46db15d3272d6f6f5b Mon Sep 17 00:00:00 2001
From: QC-L <github@liqichang.com>
Date: Mon, 30 May 2022 17:08:10 +0800
Subject: [PATCH 5/5] docs(cn): optimized translation

---
 .../javascript-in-jsx-with-curly-braces.md    | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
index c23fe08985..cf991e7174 100644
--- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
+++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
@@ -1,5 +1,5 @@
 ---
-title: 在 JSX 的花括号内使用 JavaScript
+title: 在 JSX 中通过大括号使用 JavaScript
 translators:
   - flynn-eye
   - Megrax
@@ -7,16 +7,16 @@ translators:
 
 <Intro>
 
-JSX 允许你在 JavaScript 中编写类似 HTML 的标记，从而使渲染的逻辑和内容可以写在一起。有时候，你可能想要在标记中添加一些 JavaScript 逻辑或者引用动态的属性。这种情况下，你可以在 JSX 的花括号内来编写 JavaScript。
+JSX 允许你在 JavaScript 中编写类似 HTML 的标记，从而使渲染的逻辑和内容可以写在一起。有时候，你可能想要在标记中添加一些 JavaScript 逻辑或者引用动态的属性。这种情况下，你可以在 JSX 的大括号内来编写 JavaScript。
 
 </Intro>
 
 <YouWillLearn>
 
 * 如何使用引号传递字符串
-* 在 JSX 的花括号内引用 JavaScript 变量
-* 在 JSX 的花括号内调用 JavaScript 函数
-* 在 JSX 的花括号内使用 JavaScript 对象
+* 在 JSX 的大括号内引用 JavaScript 变量
+* 在 JSX 的大括号内调用 JavaScript 函数
+* 在 JSX 的大括号内使用 JavaScript 对象
 
 </YouWillLearn>
 
@@ -70,11 +70,11 @@ export default function Avatar() {
 
 </Sandpack>
 
-请注意 `className="avatar"` 和 `src={avatar}` 之间的区别，`className="avatar"` 指定了一个就叫 `"avatar"` 的使图片在样式上变圆的 CSS 类名，而 `src={avatar}` 这种写法会去读取 JavaScript 中 `avatar` 这个变量的值。这是因为花括号可以使你直接在标签中使用 JavaScript！
+请注意 `className="avatar"` 和 `src={avatar}` 之间的区别，`className="avatar"` 指定了一个就叫 `"avatar"` 的使图片在样式上变圆的 CSS 类名，而 `src={avatar}` 这种写法会去读取 JavaScript 中 `avatar` 这个变量的值。这是因为大括号可以使你直接在标签中使用 JavaScript！
 
-## 使用花括号：一扇进入 JavaScript 世界的窗户 {/*using-curly-braces-a-window-into-the-javascript-world*/}
+## 使用大括号：一扇进入 JavaScript 世界的窗户 {/*using-curly-braces-a-window-into-the-javascript-world*/}
 
-JSX 是一种编写 JavaScript 的特殊方式。这为在花括号 `{ }` 中使用 JavaScript 带来了可能。下面的例子中声明了科学家的名字，`name`，然后在 `<h1>` 后的花括号内嵌入它：
+JSX 是一种编写 JavaScript 的特殊方式。这为在大括号 `{ }` 中使用 JavaScript 带来了可能。下面的示例中声明了科学家的名字，`name`，然后在 `<h1>` 后的大括号内嵌入它：
 
 <Sandpack>
 
@@ -91,7 +91,7 @@ export default function TodoList() {
 
 试着将 `name` 的值从 `'Gregorio Y. Zara'` 更改成 `'Hedy Lamarr'`。看看这个 To Do List 的标题将如何变化？
 
-花括号内的任何 JavaScript 表达式都能正常运行，包括像 `formatDate()` 这样的函数调用：
+大括号内的任何 JavaScript 表达式都能正常运行，包括像 `formatDate()` 这样的函数调用：
 
 <Sandpack>
 
@@ -114,16 +114,16 @@ export default function TodoList() {
 
 </Sandpack>
 
-### 可以在哪使用花括号 {/*where-to-use-curly-braces*/}
+### 可以在哪使用大括号 {/*where-to-use-curly-braces*/}
 
-在 JSX 中只能以下面两种方式使用花括号：
+在 JSX 中，只能在以下两种场景中使用大括号：
 
 1. 用作 JSX 标签内的**文本**：`<h1>{name}'s To Do List</h1>` 是有效的，但是 `<{tag}>Gregorio Y. Zara's To Do List</{tag}>` 无效。
 2. 用作紧跟在 `=` 符号后的 **属性**：`src={avatar}` 会读取 `avatar` 变量，但是 `src="{avatar}"` 只会传一个字符串 `{avatar}`。
 
-## 使用 "双花括号"：JSX 中的 CSS 和 对象 {/*using-double-curlies-css-and-other-objects-in-jsx*/}
+## 使用 "双大括号"：JSX 中的 CSS 和 对象 {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 
-除了字符串、数字和其它 JavaScript 表达式，你甚至可以在 JSX 中传递对象。对象也用花括号表示，例如 `{ name: "Hedy Lamarr", inventions: 5 }`。因此，为了能在 JSX 中传递，你必须用另一对额外的花括号包裹对象：`person={{ name: "Hedy Lamarr", inventions: 5 }}`。
+除了字符串、数字和其它 JavaScript 表达式，你甚至可以在 JSX 中传递对象。对象也用大括号表示，例如 `{ name: "Hedy Lamarr", inventions: 5 }`。因此，为了能在 JSX 中传递，你必须用另一对额外的大括号包裹对象：`person={{ name: "Hedy Lamarr", inventions: 5 }}`。
 
 你可能在 JSX 的内联 CSS 样式中就已经见过这种写法了。React 不要求你使用内联样式（使用 CSS 类就能满足大部分情况）。但是当你需要内联样式的时候，你可以给 `style` 属性传递一个对象：
 
@@ -153,7 +153,7 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 试着更改一下 `backgroundColor` 和 `color` 的值。
 
-当你写成这样时，你可以很清楚地看到花括号里包着的对象：
+当你写成这样时，你可以很清楚地看到大括号里包着的对象：
 
 ```js {2-5}
 <ul style={
@@ -164,7 +164,7 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 }>
 ```
 
-所以当你下次在 JSX 中看到 `{{` 和 `}}`时，就知道它只不过是包在花括号里的一个对象罢了！
+所以当你下次在 JSX 中看到 `{{` 和 `}}`时，就知道它只不过是包在大括号里的一个对象罢了！
 
 <Gotcha>
 
@@ -172,9 +172,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 </Gotcha>
 
-## JavaScript 对象 和 花括号的更多可能 {/*more-fun-with-javascript-objects-and-curly-braces*/}
+## JavaScript 对象和大括号的更多可能 {/*more-fun-with-javascript-objects-and-curly-braces*/}
 
-你可以将多个表达式合并到一个对象中，在 JSX 的花括号内分别使用它们：
+你可以将多个表达式合并到一个对象中，在 JSX 的大括号内分别使用它们：
 
 <Sandpack>
 
@@ -214,7 +214,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-在这个例子里，`person` JavaScript 对象包含 `name` 中存储的字符串和 `theme` 对象：
+在这个示例中，`person` JavaScript 对象包含 `name` 中存储的字符串和 `theme` 对象：
 
 ```js
 const person = {
@@ -240,9 +240,9 @@ JSX 是一种模板语言的最小实现，因为它允许你通过 JavaScript 
 现在你几乎了解了有关 JSX 的一切：
 
 * JSX 引号内的值会作为字符串传递给属性。
-* 花括号让你可以将 JavaScript 的逻辑和变量带入到标签中。
+* 大括号让你可以将 JavaScript 的逻辑和变量带入到标签中。
 * 它们会在 JSX 标签中的内容区域或紧随属性的 `=` 后起作用。
-* `{{` 和 `}}` 并不是什么特殊的语法：它只是包在 JSX 花括号内的 JavaScript 对象。
+* `{{` 和 `}}` 并不是什么特殊的语法：它只是包在 JSX 大括号内的 JavaScript 对象。
 
 </Recap>
 
@@ -292,11 +292,11 @@ body > div > div { padding: 20px; }
 
 你能找到问题出在哪吗？
 
-<Hint>注意看花括号里的内容，我们放在那的东西有没有什么问题？</Hint>
+<Hint>注意看大括号里的内容，我们放在那的东西有没有什么问题？</Hint>
 
 <Solution>
 
-之所以会出现这个问题是因为示例中的代码尝试把 *一个对象* 而不是一个字符串渲染在标签内：`<h1>{person}'s Todos</h1>` 在试图渲染整个 `person` 对象！将未经处理的对象作为文本内容使用会抛出错误，因为 React 并不知道你想如何展示它们。
+之所以会出现这个问题，是因为示例中的代码尝试把 **一个对象** 渲染在标签内，而不是字符串：`<h1>{person}'s Todos</h1>` 在试图渲染整个 `person` 对象！将未经处理的对象作为文本内容使用会抛出错误，因为 React 并不知道你想如何展示它们。
 
 要修复它，请把 `<h1>{person}'s Todos</h1>` 替换成 `<h1>{person.name}'s Todos</h1>`：
 
@@ -384,7 +384,7 @@ body > div > div { padding: 20px; }
 
 <Solution>
 
-把图片 URL 移到 `person.imageUrl` 这个属性中并在 `<img>` 标签中的花括号中读取它：
+把图片 URL 移到 `person.imageUrl` 这个属性中并在 `<img>` 标签中的大括号中读取它：
 
 <Sandpack>
 
@@ -427,9 +427,9 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-### 在 JSX 花括号内写一个表达式 {/*write-an-expression-inside-jsx-curly-braces*/}
+### 在 JSX 大括号内编写表达式 {/*write-an-expression-inside-jsx-curly-braces*/}
 
-在下面的对象中，完整的图片 URL 被分成了四个部分：base URL、 `imageId`、 `imageSize` 和文件拓展名。
+在下面的对象中，完整的图片 URL 被分成了四个部分：base URL、`imageId`、`imageSize` 和文件拓展名。
 
 我们希望这些属性组合成图片的 URL：base URL（一直是 `'https://i.imgur.com/'`）、`imageId`（`'7vQD0fP'`）、`imageSize`（`'s'`）和文件拓展（总是 `'.jpg'`）。但是，`<img>` 标签 `src` 指明的方式是有问题的。
 
@@ -587,4 +587,4 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-</Challenges>
\ No newline at end of file
+</Challenges>