Update Chinese translation of fornt-end-libraries (#40653)
* Update Chinese translation of fornt-end-libraries * fix: revert to previous translation Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
This commit is contained in:
ZhichengChen
GitHub
@ -11,9 +11,9 @@ forumTopicId: 18347
|
||||
|
||||
我们必须确保让每个人都知道，他们不应该直接修改此页面上这些代码。
|
||||
|
||||
记住，你可以在 `<!--` 为开始，`-->` 为结束的地方进行评论注释（像这样，`<!-- 我是一段注释 -->`）。
|
||||
记住，你可以在 `<!--` 为开始，`-->` 为结束的地方进行评论注释。
|
||||
|
||||
请你在你的 HTML 顶部加如下一段注释： `Only change code above this line.` 。
|
||||
请你在你的 HTML 顶部加如下一段注释： `Code below this line should not be changed` 。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -23,7 +23,7 @@ forumTopicId: 18347
|
||||
assert(code.match(/^\s*<!--/));
|
||||
```
|
||||
|
||||
注释内容应该为 `Only change code above this line`。
|
||||
注释内容应该为 `Code below this line should not be changed`。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
|
||||
@ -41,5 +41,57 @@ assert(code.match(/-->.*\n+.+/g));
|
||||
assert(code.match(/<!--/g).length === code.match(/-->/g).length);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!-- Code below this line should not be changed -->
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -27,12 +27,16 @@ forumTopicId: 301370
|
||||
|
||||
**需求 7：** 当触发一个具有`.drum-pad`属性的元素时，`#display`元素内应该展示这个触发元素关联音频片段的描述字符串（每一个字符串都应该是独一无二的）。
|
||||
|
||||
你可以 fork [这个 CodePen pen 项目](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`。
|
||||
你可以 fork [这个 CodePen pen 项目](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
# --seed--
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
@ -19,7 +19,7 @@ forumTopicId: 301371
|
||||
|
||||
**需求 3：** 我的计算器应该包含四个可以点击的元素，文本内容对应4个主要数学运算符，且应具有如下 id 属性： `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`。
|
||||
|
||||
**需求 4：** 计算器应该包含一个可点击的\`.\`（小数点）符号，对应的`id="decimal"`。
|
||||
**需求 4：** 计算器应该包含一个可点击的 `.`（小数点）符号，对应的`id="decimal"`。
|
||||
|
||||
**需求 5：** 我的计算器应该包含一个具有`id="clear"`属性的可以点击的元素。
|
||||
|
||||
@ -31,13 +31,13 @@ forumTopicId: 301371
|
||||
|
||||
**需求 9：** 我应该可以在任意顺序下对一串任意长度的数字执行加、减、乘、除操作，并且当我按下`=`时，正确答案应该显示在 id 为`display`的元素中。
|
||||
|
||||
**需求 10：** 在我输入数字的同时，我的计算器应该允许一个数字以多个零开头。
|
||||
**需求 10：** 在我输入数字的同时，我的计算器应该不允许一个数字以多个零开头。
|
||||
|
||||
**需求 11：** 当点击小数点元素时，当前展示的数值后面应该添加一个`.`符号；数字中不允许出现两个`.`符号。
|
||||
|
||||
**需求 12：** 我可以对包含小数点的数字执行任何四则运算（+、-、\*、/）。
|
||||
|
||||
**需求 13：** 如果连续键入了两个及以上的运算符，应该执行最后一次键入的运算符。
|
||||
**需求 13：** 如果连续键入了两个及以上的运算符，应该执行最后一次键入的运算符（负数（-）运算符除外）。例如，如果输入 `5 + * 7 = `，结果应该是 `35` （等同于 5 \* 7）；如果输入 `5 * - 5 =`，结果应该是 `-25`（等同于 5 x (-5)）。
|
||||
|
||||
**需求 14：** 如果在按下`=`符号后继续按一个运算符，则应该在上一次计算结果的基础上进行新的计算。
|
||||
|
||||
@ -50,12 +50,17 @@ forumTopicId: 301371
|
||||
- **立即执行逻辑：** `11.5`
|
||||
- **公式／表达式逻辑：** `32.5`
|
||||
|
||||
你可以 fork [这个 CodePen pen 项目](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`。
|
||||
你可以 fork [这个 CodePen pen 项目](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
@ -19,7 +19,7 @@ forumTopicId: 301372
|
||||
|
||||
**需求 3：** 当我在具有`#editor`属性的元素内输入文本时，具有`#preview`属性的元素应该同步更新展示我键入的内容。
|
||||
|
||||
**需求 4：** 当我在具有`#editor`属性的元素内输入 Github 风格的 Markdown 内容时，文本应该以 HTML 的形式，把我所键入的内容渲染在具有`#preview`属性的元素中（提示：你不需要自己解析 Markdown——你可以引入一个叫做 Marked 的库来完成这项工作：<https://cdnjs.com/libraries/marked>）。
|
||||
**需求 4：** 当我在具有`#editor`属性的元素内输入 GitHub 风格的 markdown 内容时，文本应该以 HTML 的形式，把我所键入的内容渲染在具有`#preview`属性的元素中（提示：你不需要自己解析 Markdown——你可以引入一个叫做 Marked 的库来完成这项工作：<https://cdnjs.com/libraries/marked>）。
|
||||
|
||||
**需求 5：** 当我的 Markdown 预览器首次加载时，具有`#editor`属性的元素内的默认内容应该包含以下每个种类的至少一段有效的 Markdown 代码：标题（H1 标签）、次级标题（H2 标签）、链接、行内代码、代码块、列表、引用块、图片、加粗文本。
|
||||
|
||||
@ -27,12 +27,17 @@ forumTopicId: 301372
|
||||
|
||||
**可选需求（你无需通过这项测试）：** 我的 Markdown 预览器能够解析回车符并且将他们以`br`（换行）元素的形式渲染出来。
|
||||
|
||||
你可以 fork [这个 CodePen pen 项目](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`。
|
||||
你可以 fork [这个 CodePen pen 项目](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
id: bd7158d8c442eddfaeb5bd13
|
||||
title: 构建一个随机引语生成器
|
||||
challengeType: 3
|
||||
forumTopicId: 301374
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -10,7 +11,7 @@ challengeType: 3
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐你使用前面没有提到的技术，否则风险自负。我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快！
|
||||
你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐你使用前面没有提到的技术，否则风险自担。我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快！
|
||||
|
||||
**需求 1：** 我应该能看到一个具有`id="quote-box"`属性的包裹元素。
|
||||
|
||||
@ -20,7 +21,7 @@ challengeType: 3
|
||||
|
||||
**需求 4：** 在`#quote-box`元素内，我应该能看到一个具有`id="new-quote"`属性的可点击元素。
|
||||
|
||||
**需求 5：** 在`#quote-box`元素内，我应该能看到一个具有`id="tweet-quote"`属性的可点击元素。
|
||||
**需求 5：** 在`#quote-box`元素内，我应该能看到一个具有`id="tweet-quote"`属性的可点击 `a` 元素。
|
||||
|
||||
**需求 6：** 首次加载时，我的 App 应该在具有`id="text"`属性的元素内展示一条随机引语。
|
||||
|
||||
@ -38,8 +39,14 @@ challengeType: 3
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
**注意：** Twitter 不允许在 iframe 里加载链接。如果你的 tweet 不能加载，尝试在 `#tweet-quote` 元素上使用 `target="_blank"` 或者 `target="_top"` 属性。`target="_top"` 会替换当前 tab 页的内容，所以确保当前内容已经保存了。
|
||||
# --hints--
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
@ -19,7 +19,7 @@ jQuery 有一个`.html()`函数，你能用其在标签里添加 HTML 标签和
|
||||
|
||||
请强调 id 为`target4`的按钮的文本。
|
||||
|
||||
请查看此[链接](https://developer.mozilla.org/en/docs/Web/HTML/Element/em)来了解更多`<i>`和`<em>`的区别和用法。
|
||||
请查看此[链接](https://www.freecodecamp.org/news/html-elements-explained-what-are-html-tags/#em-elemen)来了解更多`<i>`和`<em>`的区别和用法。
|
||||
|
||||
注意，`<i>`标签虽然传统上用来强调文本，但此后常用作图标的标签；`<em>`标签作为强调标签现在已被广泛接受。两者都可以应对本次挑战。
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`Presentational`组件应渲染`h2`、`input`、`button`、`ul`四个元素。
|
||||
`Presentational` 组件应该渲染到页面上。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -82,5 +82,218 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```jsx
|
||||
ReactDOM.render(<AppWrapper />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```jsx
|
||||
// Redux:
|
||||
const ADD = 'ADD';
|
||||
|
||||
const addMessage = (message) => {
|
||||
return {
|
||||
type: ADD,
|
||||
message: message
|
||||
}
|
||||
};
|
||||
|
||||
const messageReducer = (state = [], action) => {
|
||||
switch (action.type) {
|
||||
case ADD:
|
||||
return [
|
||||
...state,
|
||||
action.message
|
||||
];
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
const store = Redux.createStore(messageReducer);
|
||||
|
||||
// React:
|
||||
class Presentational extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
input: '',
|
||||
messages: []
|
||||
}
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.submitMessage = this.submitMessage.bind(this);
|
||||
}
|
||||
handleChange(event) {
|
||||
this.setState({
|
||||
input: event.target.value
|
||||
});
|
||||
}
|
||||
submitMessage() {
|
||||
this.setState((state) => {
|
||||
const currentMessage = state.input;
|
||||
return {
|
||||
input: '',
|
||||
messages: state.messages.concat(currentMessage)
|
||||
};
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h2>Type in a new Message:</h2>
|
||||
<input
|
||||
value={this.state.input}
|
||||
onChange={this.handleChange}/><br/>
|
||||
<button onClick={this.submitMessage}>Submit</button>
|
||||
<ul>
|
||||
{this.state.messages.map( (message, idx) => {
|
||||
return (
|
||||
<li key={idx}>{message}</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// React-Redux:
|
||||
const mapStateToProps = (state) => {
|
||||
return { messages: state }
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
submitNewMessage: (newMessage) => {
|
||||
dispatch(addMessage(newMessage))
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const Provider = ReactRedux.Provider;
|
||||
const connect = ReactRedux.connect;
|
||||
|
||||
// Define the Container component here:
|
||||
|
||||
|
||||
class AppWrapper extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
render() {
|
||||
// Complete the return statement:
|
||||
return (null);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```jsx
|
||||
// Redux:
|
||||
const ADD = 'ADD';
|
||||
|
||||
const addMessage = (message) => {
|
||||
return {
|
||||
type: ADD,
|
||||
message: message
|
||||
}
|
||||
};
|
||||
|
||||
const messageReducer = (state = [], action) => {
|
||||
switch (action.type) {
|
||||
case ADD:
|
||||
return [
|
||||
...state,
|
||||
action.message
|
||||
];
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
const store = Redux.createStore(messageReducer);
|
||||
|
||||
// React:
|
||||
class Presentational extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
input: '',
|
||||
messages: []
|
||||
}
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.submitMessage = this.submitMessage.bind(this);
|
||||
}
|
||||
handleChange(event) {
|
||||
this.setState({
|
||||
input: event.target.value
|
||||
});
|
||||
}
|
||||
submitMessage() {
|
||||
this.setState((state) => {
|
||||
const currentMessage = state.input;
|
||||
return {
|
||||
input: '',
|
||||
messages: state.messages.concat(currentMessage)
|
||||
};
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h2>Type in a new Message:</h2>
|
||||
<input
|
||||
value={this.state.input}
|
||||
onChange={this.handleChange}/><br/>
|
||||
<button onClick={this.submitMessage}>Submit</button>
|
||||
<ul>
|
||||
{this.state.messages.map( (message, idx) => {
|
||||
return (
|
||||
<li key={idx}>{message}</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// React-Redux:
|
||||
const mapStateToProps = (state) => {
|
||||
return { messages: state }
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
submitNewMessage: (newMessage) => {
|
||||
dispatch(addMessage(newMessage))
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const Provider = ReactRedux.Provider;
|
||||
const connect = ReactRedux.connect;
|
||||
|
||||
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
|
||||
|
||||
class AppWrapper extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<Container/>
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
@ -7,7 +7,7 @@ forumTopicId: 301395
|
||||
|
||||
# --description--
|
||||
|
||||
还有其他复杂的概念可以为你的 React 代码增加强大的功能。但是，你可能会想知道更简单的问题，比如：如何对在 React 中创建的 JSX 元素进行风格化。你可能知道，由于[将 class 应用于 JSX 元素的方式](define-an-html-class-in-jsx)与 HTML 中的使用并不完全相同。
|
||||
还有其他复杂的概念可以为你的 React 代码增加强大的功能。但是，你可能会想知道更简单的问题，比如：如何对在 React 中创建的 JSX 元素进行风格化。你可能知道，由于[将 class 应用于 JSX 元素的方式](/learn/front-end-libraries/react/define-an-html-class-in-jsx)与 HTML 中的使用并不完全相同。
|
||||
|
||||
如果从样式表导入样式，它就没有太大的不同。使用`className`属性将 class 应用于 JSX 元素，并将样式应用于样式表中的 class。另一种选择是使用***内联***样式，这在 ReactJS 开发中非常常见。
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ forumTopicId: 301403
|
||||
|
||||
# --instructions--
|
||||
|
||||
`MyApp`组件是有状态的，它将`Navbar`组件渲染成它的为子组件。将`MyApp`组件`state`中的`name`属性向下传递给子组件，然后在`h1`标签中显示`name`，`name`是`Navbar`render 方法的一部分。
|
||||
`MyApp`组件是有状态的，它将`Navbar`组件渲染成它的为子组件。将`MyApp`组件`state`中的`name`属性向下传递给子组件，然后在`h1`标签中显示`name`，`name`是`Navbar`render 方法的一部分。`name` 应该显示在文字 `Hello, my name is:` 后面。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -15,9 +15,9 @@ forumTopicId: 301405
|
||||
|
||||
代码编辑器有两个部分为你定义的组件：一个名为`GameOfChance`的父组件和一个名为`Results`的子组件。他们被用来创建一个简单的游戏，用户按下按钮来看他们是赢还是输。
|
||||
|
||||
首先，你需要一个简单的表达式，每次运行时都会随机返回一个不同的值。你可以使用`Math.random()`。每次调用此方法时，此方法返回`0`（包括）和`1`（不包括）之间的值。因此，对于50/50的几率，请在表达式中使用`Math.random() > .5`。从统计学上讲，这个表达式有 50％ 的几率返回`true`，另外 50％ 返回`false`。在第 30 行，用此表达式替换注释以完成变量声明。
|
||||
首先，你需要一个简单的表达式，每次运行时都会随机返回一个不同的值。你可以使用`Math.random()`。每次调用此方法时，此方法返回`0`（包括）和`1`（不包括）之间的值。因此，对于50/50的几率，请在表达式中使用`Math.random() > .5`。从统计学上讲，这个表达式有 50％ 的几率返回`true`，另外 50％ 返回`false`。在第 render 方法里，用此表达式替换注释以完成变量声明。
|
||||
|
||||
现在你有了一个表达式，可以用来在代码中做出随机决定，接下来你需要实现以下功能：将`Results`组件渲染为`GameOfChance`的子组件，并将`expression`作为 prop 传递出去，prop 的名字是`fiftyFifty`。在`Results`组件中，编写一个三元表达式基于从`GameOfChance`传来的 prop`fiftyFifty`来渲染文本`"You win!"`或者`"You lose!"`。最后，确保`handleClick()`方法正确计算每个回合，以便用户知道他们玩过多少次。这也可以让用户知道组件实际上已经更新，以防他们连续赢两次或输两次时自己不知道。
|
||||
现在你有了一个表达式，可以用来在代码中做出随机决定，接下来你需要实现以下功能：将`Results`组件渲染为`GameOfChance`的子组件，并将`expression`作为 prop 传递出去，prop 的名字是`fiftyFifty`。在`Results`组件中，编写一个三元表达式基于从`GameOfChance`传来的 prop`fiftyFifty`来渲染文本`"You Win!"`或者`"You Lose!"`。最后，确保`handleClick()`方法正确计算每个回合，以便用户知道他们玩过多少次。这也可以让用户知道组件实际上已经更新，以防他们连续赢两次或输两次时自己不知道。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -51,7 +51,7 @@ assert(
|
||||
(getUserInput) =>
|
||||
assert(
|
||||
(function () {
|
||||
const noWhiteSpace = getUserInput('index').replace(/ /g, '');
|
||||
const noWhiteSpace = __helpers.removeWhiteSpace(getUserInput('index'));
|
||||
return (
|
||||
noWhiteSpace.includes('quantity:PropTypes.number.isRequired') &&
|
||||
noWhiteSpace.includes('Items.propTypes=')
|
||||
|
||||
@ -7,9 +7,9 @@ forumTopicId: 301421
|
||||
|
||||
# --description--
|
||||
|
||||
有时可能在更新状态的时候想知道上一个状态是什么。但是状态更新是异步的，这意味着 React 可能会把多个 `setState()` 集中在一起批量更新。所以设置 `this.state` 或者 `this.props` 后值没有立即更新。所以最好不要写如下的代码：
|
||||
有时可能在更新状态的时候想知道上一个状态是什么。但是状态更新是异步的，这意味着 React 可能会把多个 `setState()` 集中在一起批量更新。所以设置 `this.state` 或者 `this.props` 后值后可能没有立即更新。所以最好不要写如下的代码：
|
||||
|
||||
```js
|
||||
```jsx
|
||||
this.setState({
|
||||
counter: this.state.counter + this.props.increment
|
||||
});
|
||||
@ -17,7 +17,7 @@ this.setState({
|
||||
|
||||
正确的做法是，给 `setState` 传入一个函数，这个函数可以访问 state 和 props。给 `setState` 传入函数可以返回赋值后的 state 和 props。代码可以重写为这样：
|
||||
|
||||
```js
|
||||
```jsx
|
||||
this.setState((state, props) => ({
|
||||
counter: state.counter + props.increment
|
||||
}));
|
||||
@ -25,7 +25,7 @@ this.setState((state, props) => ({
|
||||
|
||||
如果只需要 `state`，那么用下面的格式也是可以的：
|
||||
|
||||
```js
|
||||
```jsx
|
||||
this.setState(state => ({
|
||||
counter: state.counter + 1
|
||||
}));
|
||||
|
||||
@ -13,7 +13,7 @@ React 的最佳实践是在生命周期方法`componentDidMount()`中对服务
|
||||
|
||||
# --instructions--
|
||||
|
||||
`componentDidMount()`中有一个模拟 API 调用。它在 2.5 秒后设置 state，以模拟调用服务器检索数据。本示例请求站点的当前活动用户总数。在 render 方法中，把`activeUsers`渲染到`h1`标签中。观看预览中发生的事情，随意更改超时时间以查看不同的效果。
|
||||
`componentDidMount()` 中有一个模拟 API 调用。它在 2.5 秒后设置 state，以模拟调用服务器检索数据。本示例请求站点的当前活动用户总数。在 render 方法中，把 `activeUsers` 渲染到文字 `Active Users:` 后的 `h1` 标签中。观看预览中发生的事情，随意更改超时时间以查看不同的效果。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -45,5 +45,13 @@ assert(
|
||||
assert(document.getElementById('challenge-node').childNodes.length === 1);
|
||||
```
|
||||
|
||||
`MyComponent` 应该有一个构造器，里面调用了传参 `props` 的 `super` 函数。
|
||||
|
||||
```js
|
||||
assert(
|
||||
MyComponent.toString().includes('MyComponent(props)') &&
|
||||
MyComponent.toString().includes('_super.call(this, props)')
|
||||
);
|
||||
```
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ div {
|
||||
}
|
||||
```
|
||||
|
||||
定义以`@mixin`开头，后跟自定义名称。参数（`$x`，`$y`，`$blur`，以及上例中的`$c`是可选的。 现在，只要在需要的地方使用`@include`调用上面定义的`mixin`，就可以自动添加好所有的浏览器前缀：`mixin`使用`@include`指令调用：
|
||||
定义以`@mixin`开头，后跟自定义名称。参数（`$x`，`$y`，`$blur`，以及上例中的`$c`是可选的。 现在，只要在需要 `box-shadow` 的地方使用`@include`调用上面定义的`mixin`，就可以自动添加好所有的浏览器前缀：`mixin`使用`@include`指令调用：
|
||||
|
||||
```scss
|
||||
div {
|
||||
@ -54,32 +54,78 @@ assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
|
||||
你应该给`$radius`添加`-webkit-border-radius`浏览器前缀。
|
||||
|
||||
```js
|
||||
assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi));
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
你应该给`$radius`添加`-moz-border-radius`浏览器前缀。
|
||||
|
||||
```js
|
||||
assert(code.match(/-moz-border-radius:\s*?\$radius;/gi));
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
你应该给`$radius`添加`-ms-border-radius`浏览器前缀。
|
||||
|
||||
```js
|
||||
assert(code.match(/-ms-border-radius:\s*?\$radius;/gi));
|
||||
assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
|
||||
```
|
||||
|
||||
你应该给`$radius`添加`border-radius`。
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4);
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
|
||||
4
|
||||
);
|
||||
```
|
||||
|
||||
你应使用`@include`关键字调用`border-radius mixin`，并将其设置为 15px。
|
||||
|
||||
```js
|
||||
assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi));
|
||||
assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
#awesome {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: green;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="awesome"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-ms-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
#awesome {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: green;
|
||||
@include border-radius(15px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="awesome"></div>
|
||||
```
|
||||
|
||||
@ -9,7 +9,7 @@ forumTopicId: 301462
|
||||
|
||||
你可以在 Sass 中使用`@for`循环，它的表现类似与 JavaScript 中的`for`循环。
|
||||
|
||||
`@for`以两种方式使用："start through end" 或 "start to end"。主要区别在于“开始结束”*排除* 结束号码，而“开始结束”*包括* 结束号码。
|
||||
`@for`以两种方式使用："开始 through 到" 或 "开始 to 结束"。主要区别在于“开始结束”*排除* 结束号码，而“开始结束”*包括* 结束号码。
|
||||
|
||||
这是一个开始 **到** 结束示例：
|
||||
|
||||
@ -84,4 +84,3 @@ assert($('.text-5').css('font-size') == '75px');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user