chore(i18n,curriculum): update translations (#43463)
This commit is contained in:
@ -31,7 +31,6 @@ JSX 元素使用 `style` 屬性,但是鑑於 JSX 的編譯方式,不能將
|
||||
在代碼編輯器中給 `div` 添加一個 `style` 屬性,將文本顏色設置爲紅色,字體大小設置爲 `72px`。
|
||||
|
||||
請注意,可以選擇將字體大小設置爲數字,省略單位 `px`,或者將其寫爲 `72px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
組件應該渲染一個 `div` 元素。
|
||||
|
@ -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 做出渲染決定。 可以使用三元運算符,但是可以看到過去幾個挑戰中涵蓋的其他幾個概念在這種情況下可能同樣有用。
|
||||
|
||||
|
@ -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--
|
||||
|
||||
|
@ -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 () => {
|
||||
|
@ -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>}
|
||||
|
@ -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 代碼*裏面*使用變量時,可以將變量名放在大括號中。
|
||||
|
||||
|
Reference in New Issue
Block a user