chore(i18n,curriculum): processed translations (#44193)
This commit is contained in:
camperbot
GitHub
@ -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>
|
||||
);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -109,7 +109,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`h1` 标头应该从组件的 state 渲染 `submit` 字段的值。
|
||||
`h1` 标题元素应该渲染从组件的状态 `submit` 字段获取的值。
|
||||
|
||||
```js
|
||||
(() => {
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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 () => {
|
||||
|
||||
@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent` 应该在 `div` 中渲染一个 `h1` 标题。
|
||||
`MyComponent` 应该在 `div` 中渲染一个 `h1` 标题元素。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
渲染的 `h1` 标题中应该只包含一段文本，这段文本是从组件的 state 中渲染出来的。
|
||||
渲染的 `h1` 标题元素应该只包含从组件状态渲染的文本。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -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 () => {
|
||||
|
||||
Reference in New Issue
Block a user