gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(i18n,curriculum): processed translations (#44193)

Browse Source
This commit is contained in:
camperbot
2021-11-17 06:20:53 -08:00
committed by GitHub
parent 8812e6b3ac
commit 9f9fb63caa
47 changed files with 417 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/access-props-using-this.props.md
View File

@@ -14,67 +14,54 @@ dashedName: access-props-using-this-props
# --instructions--
在父組件 `ResetPassword` 中渲染 `ReturnTempPassword` 組件的一個實例。 在這裏，爲 `ReturnTempPassword` 提供一個 `tempPassword` prop，並賦值一個長度至少爲 8 個字符的字符串。 在子組件 `ReturnTempPassword` 中，訪問 `strong` 標籤中的 `tempPassword` prop，以確保用戶看到臨時密碼。
在父組件 `App` 中渲染 `Welcome` 組件的一個實例。 在這裏，給 `Welcome` 一個 `name` 的 prop，並給它賦值一個字符串。 在 `Welcome` 的子節點裏，訪問 `strong` 標籤內的 `name` prop。
# --hints--
`ResetPassword` 組件應該返回單個 `div` 元素。
`App` 組件應返回單個 `div` 元素。
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ResetPassword));
const mockedComponent = Enzyme.mount(React.createElement(App));
return mockedComponent.children().type() === 'div';
})()
);
```
`ResetPassword` 的第四個子組件應該是 `ReturnTempPassword` 組件。
`App` 的子組件應該是 `Welcome` 組件。
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ResetPassword));
const mockedComponent = Enzyme.mount(React.createElement(App));
return (
mockedComponent.children().childAt(3).name() === 'ReturnTempPassword'
mockedComponent.children().childAt(0).name() === 'Welcome'
);
})()
);
```
`ReturnTempPassword` 組件應該有一個名爲 `tempPassword` 的屬性。
`Welcome` 組件應該有一個名爲 `name` 的 prop。
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ResetPassword));
return mockedComponent.find('ReturnTempPassword').props().tempPassword;
const mockedComponent = Enzyme.mount(React.createElement(App));
return mockedComponent.find('Welcome').props().name;
})()
);
```
`ReturnTempPassword` 組件的 `tempPassword` prop 值應該是一個字符串，至少爲 8 個字符。
`Welcome` 組件應顯示你在 `strong` 標籤中作爲 `name` 屬性傳遞的字符串。
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ResetPassword));
const temp = mockedComponent.find('ReturnTempPassword').props()
.tempPassword;
return typeof temp === 'string' && temp.length >= 8;
})()
);
```
`ReturnTempPassword` 組件應該顯示作爲 `tempPassword` prop 創建的密碼，並且密碼被包裹在 `strong` 標籤中。
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(ResetPassword));
const mockedComponent = Enzyme.mount(React.createElement(App));
return (
mockedComponent.find('strong').text() ===
mockedComponent.find('ReturnTempPassword').props().tempPassword
mockedComponent.find('Welcome').props().name
);
})()
);
@@ -85,13 +72,13 @@ assert(
## --after-user-code--
```jsx
ReactDOM.render(<ResetPassword />, document.getElementById('root'))
ReactDOM.render(<App />, document.getElementById('root'))
```
## --seed-contents--
```jsx
class ReturnTempPassword extends React.Component {
class App extends React.Component {
constructor(props) {
super(props);
@@ -100,14 +87,14 @@ class ReturnTempPassword extends React.Component {
return (
<div>
{ /* Change code below this line */ }
<p>Your temporary password is: <strong></strong></p>
<Welcome />
{ /* Change code above this line */ }
</div>
);
}
};
class ResetPassword extends React.Component {
class Welcome extends React.Component {
constructor(props) {
super(props);
@@ -115,11 +102,8 @@ class ResetPassword extends React.Component {
render() {
return (
<div>
<h2>Reset Password</h2>
<h3>We've generated a new temporary password for you.</h3>
<h3>Please reset this password from your account settings ASAP.</h3>
{ /* Change code below this line */ }
<p>Hello, <strong></strong>!</p>
{ /* Change code above this line */ }
</div>
);
@@ -130,7 +114,7 @@ class ResetPassword extends React.Component {
# --solutions--
```jsx
class ReturnTempPassword extends React.Component {
class Welcome extends React.Component {
constructor(props) {
super(props);
@@ -138,28 +122,27 @@ class ReturnTempPassword extends React.Component {
render() {
return (
<div>
<p>Your temporary password is: <strong>{this.props.tempPassword}</strong></p>
</div>
);
}
};
class ResetPassword extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2>Reset Password</h2>
<h3>We've generated a new temporary password for you.</h3>
<h3>Please reset this password from your account settings ASAP.</h3>
{ /* Change code below this line */ }
<ReturnTempPassword tempPassword="serrPbqrPnzc" />
<p>Hello, <strong>{this.props.name}</strong>!</p>
{ /* Change code above this line */ }
</div>
);
}
};
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{ /* Change code below this line */ }
<Welcome name="Quincy"/>
{ /* Change code above this line */ }
</div>
);
}
};
```

2
curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/compose-react-components.md
View File

@@ -14,7 +14,7 @@ dashedName: compose-react-components
在代碼編輯器中，`TypesOfFood` 組件已經渲染了一個名爲 `Vegetables` 的組件。 此外，還有上次挑戰中的 `Fruits` 組件。
在 `Fruits` 中嵌套兩個組件，首先 `NonCitrus`，然後是 `Citrus`， 這兩個組件都已經引入。 接下來，將 `Fruits` 類組件嵌到 `TypesOfFood` 組件中，位於 `h1` 標題下方和 `Vegetables` 上方。 結果應該是一系列嵌套的組件，它們使用兩種不同的組件類型。
在 `Fruits` 中嵌套兩個組件，首先 `NonCitrus`，然後是 `Citrus`， 這兩個組件都已經引入。 接下來，將 `Fruits` 類組件嵌套到 `TypesOfFood` 組件中，位於 `h1` 標題元素下方和 `Vegetables` 上方。 結果應該是一系列嵌套的組件，它們使用兩種不同的組件類型。
# --hints--

2
curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/create-a-controlled-form.md
View File

@@ -109,7 +109,7 @@ assert(
);
```
`h1` 標頭應該從組件的 state 渲染 `submit` 字段的值。
`h1` 標題元素應該渲染從組件的狀態 `submit` 字段獲取的值。
```js
(() => {

4
curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/create-a-react-component.md
View File

@@ -38,7 +38,7 @@ class Kitten extends React.Component {
assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');
```
返回的 `div` 中應該渲染一個 `h1` 標題。
返回的 `div` 中應該渲染一個 `h1` 標題元素。
```js
assert(
@@ -48,7 +48,7 @@ assert(
);
```
`h1` 標題中應該包含字符串 `Hello React!`。
`h1` 標題元素中應該包含字符串 `Hello React!`。
```js
assert(

4
curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/render-state-in-the-user-interface-another-way.md
View File

@@ -27,7 +27,7 @@ assert(
);
```
`MyComponent` 應該在 `div` 中渲染一個 `h1` 標題。
`MyComponent` 應該在 `div` 中渲染一個 `h1` 標題元素。
```js
assert(
@@ -44,7 +44,7 @@ assert(
assert(/<h1>\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput('index')));
```
渲染的 `h1` 標題中應該包含一段文本，這段文本是從組件的 state 中渲染出來的。
渲染的 `h1` 標題元素應包含從組件狀態渲染的文本。
```js
async () => {

4
curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/render-state-in-the-user-interface.md
View File

@@ -33,7 +33,7 @@ assert(
);
```
`MyComponent` 應該在 `div` 中渲染一個 `h1` 標題。
`MyComponent` 應該在 `div` 中渲染一個 `h1` 標題元素。
```js
assert(
@@ -43,7 +43,7 @@ assert(
);
```
渲染的 `h1` 標題中應該只包含一段文本，這段文本是從組件的 state 中渲染出來的。
渲染的 `h1` 標題元素應該只包含從組件狀態渲染的文本。
```js
async () => {

4
curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/set-state-with-this.setstate.md
View File

@@ -35,13 +35,13 @@ assert(
);
```
`MyComponent` 應該渲染一個 `h1` 標題。
`MyComponent` 應該渲染一個 `h1` 標題元素。
```js
assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1);
```
渲染的 `h1` 標題中應該包含一段文本，這段文本是從組件的 state 中渲染出來的。
渲染的 `h1` 標題元素應包含從組件狀態渲染的文本。
```js
async () => {