diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.md index 87128c71fd..2d2c9994fd 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.md @@ -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*.*this line))\s*.*this line.*\s*-->/gi)); @@ -41,5 +41,57 @@ assert(code.match(/-->.*\n+.+/g)); assert(code.match(//g).length); ``` +# --seed-- + +## --seed-contents-- + +```html +
+

jQuery Playground

+
+
+

#left-well

+
+ + + +
+
+
+

#right-well

+
+ + + +
+
+
+
+``` + # --solutions-- +```html + +
+

jQuery Playground

+
+
+

#left-well

+
+ + + +
+
+
+

#right-well

+
+ + + +
+
+
+
+``` diff --git a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.md index 2481b6e949..446a6df203 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.md @@ -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 +``` diff --git a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator.md index e5ab6ebc34..1660cb7f71 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator.md @@ -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 +``` diff --git a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer.md index a997375080..15d8878a40 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer.md @@ -19,7 +19,7 @@ forumTopicId: 301372 **需求 3：** 当我在具有`#editor`属性的元素内输入文本时，具有`#preview`属性的元素应该同步更新展示我键入的内容。 -**需求 4：** 当我在具有`#editor`属性的元素内输入 Github 风格的 Markdown 内容时，文本应该以 HTML 的形式，把我所键入的内容渲染在具有`#preview`属性的元素中（提示：你不需要自己解析 Markdown——你可以引入一个叫做 Marked 的库来完成这项工作：）。 +**需求 4：** 当我在具有`#editor`属性的元素内输入 GitHub 风格的 markdown 内容时，文本应该以 HTML 的形式，把我所键入的内容渲染在具有`#preview`属性的元素中（提示：你不需要自己解析 Markdown——你可以引入一个叫做 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 +``` diff --git a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine.md index 1112cb7249..d8950d5656 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine.md @@ -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 +``` diff --git a/curriculum/challenges/chinese/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.md b/curriculum/challenges/chinese/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.md index 31480bdf0c..a4a3fd01ba 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.md @@ -19,7 +19,7 @@ jQuery 有一个`.html()`函数，你能用其在标签里添加 HTML 标签和 请强调 id 为`target4`的按钮的文本。 -请查看此[链接](https://developer.mozilla.org/en/docs/Web/HTML/Element/em)来了解更多``和``的区别和用法。 +请查看此[链接](https://www.freecodecamp.org/news/html-elements-explained-what-are-html-tags/#em-elemen)来了解更多``和``的区别和用法。 注意，``标签虽然传统上用来强调文本，但此后常用作图标的标签；``标签作为强调标签现在已被广泛接受。两者都可以应对本次挑战。 diff --git a/curriculum/challenges/chinese/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.md b/curriculum/challenges/chinese/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.md index 190dddac7e..e8cf951e52 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.md @@ -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(, 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 ( +
+

Type in a new Message:

+
+ +
    + {this.state.messages.map( (message, idx) => { + return ( +
  • {message}
    • + ) + }) + } +
+
+ ); + } +}; + +// 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 ( +
+

Type in a new Message:

+
+ +
    + {this.state.messages.map( (message, idx) => { + return ( +
  • {message}
    • + ) + }) + } +
+
+ ); + } +}; + +// 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 ( + + + + ); + } +}; +``` diff --git a/curriculum/challenges/chinese/03-front-end-libraries/react/introducing-inline-styles.md b/curriculum/challenges/chinese/03-front-end-libraries/react/introducing-inline-styles.md index 64c3e7e0ae..55addfe30e 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/react/introducing-inline-styles.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/react/introducing-inline-styles.md @@ -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 开发中非常常见。 diff --git a/curriculum/challenges/chinese/03-front-end-libraries/react/pass-state-as-props-to-child-components.md b/curriculum/challenges/chinese/03-front-end-libraries/react/pass-state-as-props-to-child-components.md index 16141b1ebc..ed540668eb 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/react/pass-state-as-props-to-child-components.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/react/pass-state-as-props-to-child-components.md @@ -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-- diff --git a/curriculum/challenges/chinese/03-front-end-libraries/react/render-conditionally-from-props.md b/curriculum/challenges/chinese/03-front-end-libraries/react/render-conditionally-from-props.md index 7224fe7bc2..020fd10656 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/react/render-conditionally-from-props.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/react/render-conditionally-from-props.md @@ -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-- diff --git a/curriculum/challenges/chinese/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md b/curriculum/challenges/chinese/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md index b885aed89b..dcc803fc41 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.md @@ -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=') diff --git a/curriculum/challenges/chinese/03-front-end-libraries/react/use-state-to-toggle-an-element.md b/curriculum/challenges/chinese/03-front-end-libraries/react/use-state-to-toggle-an-element.md index 562053b6f7..f87cf54b4e 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/react/use-state-to-toggle-an-element.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/react/use-state-to-toggle-an-element.md @@ -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 })); diff --git a/curriculum/challenges/chinese/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.md b/curriculum/challenges/chinese/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.md index ed0488e18f..e17d3d82b9 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.md @@ -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-- diff --git a/curriculum/challenges/chinese/03-front-end-libraries/react/write-a-react-component-from-scratch.md b/curriculum/challenges/chinese/03-front-end-libraries/react/write-a-react-component-from-scratch.md index 040ec87267..baffa7c3f1 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/react/write-a-react-component-from-scratch.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/react/write-a-react-component-from-scratch.md @@ -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-- diff --git a/curriculum/challenges/chinese/03-front-end-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/chinese/03-front-end-libraries/sass/create-reusable-css-with-mixins.md index 49ab5eb007..4ac514a1a3 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/sass/create-reusable-css-with-mixins.md @@ -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 + + +
``` # --solutions-- +```html + + +
+``` diff --git a/curriculum/challenges/chinese/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.md b/curriculum/challenges/chinese/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.md index 26425723da..c347e8587a 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.md @@ -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-- -