chore(i18n,curriculum): update translations (#43463)

This commit is contained in:
camperbot
2021-09-18 11:22:53 -07:00
committed by GitHub
parent 81d48b26ad
commit 15be1fe6bb
164 changed files with 1081 additions and 372 deletions

View File

@ -31,7 +31,6 @@ JSX 元素使用 `style` 属性,但是鉴于 JSX 的编译方式,不能将
在代码编辑器中给 `div` 添加一个 `style` 属性,将文本颜色设置为红色,字体大小设置为 `72px`
请注意,可以选择将字体大小设置为数字,省略单位 `px`,或者将其写为 `72px`
# --hints--
组件应该渲染一个 `div` 元素。

View File

@ -8,7 +8,7 @@ dashedName: render-conditionally-from-props
# --description--
到目前为止,已经看到如何使用 `if/else``&&` 以及三元运算符(`condition ? expressionIfTrue : expressionIfFalse`在不同条件下运行不同的代码。 然而,还有一个重要的话题需要讨论,将这些概念中的任何一个或所有概念与另一个强大的 React 功能 props 结合起来。 使用 props 有条件地渲染代码在 React 开发人员中很常见——也就是说:他们使用给定 prop 的值来自动决定渲染什么。
到目前为止,已经看到如何使用 `if/else``&&`三元运算符(`condition ? expressionIfTrue : expressionIfFalse`对渲染什么和何时渲染做出有条件的判定。 然而,还有一个重要的话题需要讨论,将这些概念中的任何一个或所有概念与另一个强大的 React 功能 props 结合起来。 使用 props 有条件地渲染代码在 React 开发人员中很常见——也就是说:他们使用给定 prop 的值来自动决定渲染什么。
在这个挑战中,将设置一个子组件来根据 props 做出渲染决定。 可以使用三元运算符,但是可以看到过去几个挑战中涵盖的其他几个概念在这种情况下可能同样有用。

View File

@ -16,7 +16,7 @@ ReactDOM 提供了一个简单的方法来将 React 元素呈现给 DOM如下
# --instructions--
代码编辑器有一个简单的 JSX 组件。 使用 `ReactDOM.render()` 方法将该组件渲染到页面。 可以将定义好的 JSX 元素直接作为第一个参数传入,然后使用 `document.getElementById()` 来选择要渲染到的 DOM 节点, 在这个挑战中,请渲染到 `id='challenge-node'` `div` 中。 确保没有修改 `JSX` 常量。
代码编辑器有一个简单的 JSX 组件。 使用 `ReactDOM.render()` 方法将该组件渲染到页面。 可以将定义好的 JSX 元素直接作为第一个参数传入,然后使用 `document.getElementById()` 来选择要渲染到的 DOM 节点, 在这个挑战中,请渲染到 `id='challenge-node'``div` 中。 确保没有修改 `JSX` 常量。
# --hints--

View File

@ -18,7 +18,7 @@ MyComponent 的 state 中包含一个 `boolean`(布尔值),用于跟踪是
# --hints--
`MyComponent` 应该存在并渲染。
`MyComponent` 应该存在并渲染。
```js
assert(
@ -29,7 +29,7 @@ assert(
);
```
`display` 被设置为 `true` 时,`div``button``h1` 标签应该渲染。
`display` 被设置为 `true` 时,`div``button``h1` 标签应该渲染。
```js
async () => {
@ -50,7 +50,7 @@ async () => {
};
```
`display` 被设置为 `false` 时,只有 `div``button` 应该渲染。
`display` 被设置为 `false` 时,只有 `div``button` 应该渲染。
```js
async () => {

View File

@ -1,6 +1,6 @@
---
id: 5a24c314108439a4d4036185
title: Use && for a More Concise Conditional
title: 使用 && 获得更简洁的条件
challengeType: 6
forumTopicId: 301413
dashedName: use--for-a-more-concise-conditional
@ -8,7 +8,7 @@ dashedName: use--for-a-more-concise-conditional
# --description--
`if/else` 语句在上一次挑战中是有效的,但是有一种更简洁的方法可以达到同样的结果。 假设正在跟踪组件中的几个条件,并且希望根据这些条件中的每一个来渲染不同的元素。 如果你写了很多 `else if` 语句来返回稍微不同的 UI你可能会写很多重复代码这就留下了出错的空间。 相反,你可以使用 `&&` 逻辑运算符以更简洁的方式执行条件逻辑。 这是完全可行的,因为你希望检查条件是否为 `true`。如果是,则返回一些标记。 这里有一个例子
`if/else` 语句在上一次挑战中是有效的,但是有一种更简洁的方法可以达到同样的结果。 假设正在跟踪组件中的几个条件,并且希望根据这些条件中的每一个来渲染不同的元素。 如果你写了很多 `else if` 语句来返回稍微不同的 UI你可能会写很多重复代码这就留下了出错的空间。 相反,你可以使用 `&&` 逻辑运算符以更简洁的方式执行条件逻辑。 这是完全可行的,因为你希望检查条件是否为 `true`。如果是,则返回一些标记。 下面是一个示例
```jsx
{condition && <p>markup</p>}

View File

@ -8,7 +8,7 @@ dashedName: use-advanced-javascript-in-react-render-method
# --description--
在之前的挑战中,学习了如何使用大括号 `{ }` 将 JavaScript 代码插入到 JSX 代码中,用于访问 props、传递 props、访问 state、在代码中插入注释以及最近学习的定制组件样式等任务。 这些都是将 JavaScript 放在 JSX 中的常见用例,但是在 React 组件中使用 JavaScript 代码还有其他方式。
在之前的挑战中,学习了如何使用大括号 `{ }` 将 JavaScript 代码插入到 JSX 代码中,用于访问 props、传递 props、访问 state、在代码中插入注释以及最近学习的定制组件样式等任务。 这些都是将 JavaScript 放在 JSX 中的常见用例,但是在 React 组件中使用 JavaScript 代码还有其他方式。
`render` 方法中编写 JavaScript可以把 JavaScript 直接放在 `return` 语句之前,而***不必***将其插入大括号中。 这是因为它还不在 JSX 代码中。 如果之后想在 `return` 语句中的 JSX 代码*里面*使用变量时,可以将变量名放在大括号中。