2018-10-10 22:03:03 +00:00
|
|
|
|
---
|
|
|
|
|
id: 5a24c314108439a4d403616c
|
2020-12-16 07:37:30 +00:00
|
|
|
|
title: 覆盖默认的 Props
|
2018-10-10 22:03:03 +00:00
|
|
|
|
challengeType: 6
|
2020-09-17 16:13:42 +00:00
|
|
|
|
forumTopicId: 301399
|
2018-10-10 22:03:03 +00:00
|
|
|
|
---
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --description--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
在 React 中,设置默认的 props 是一个很有用的特性,显式设置组件的 prop 值即可覆盖默认 props。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --instructions--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
`ShoppingCart`组件现在渲染了一个子组件`Items`。该`Items`组件有一个默认`quantity`prop,其值被设置为整数`0`。通过传入数值`10`来覆盖`quantity`的默认 prop。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
**注意:** 请记住,向组件添加 prop 的语法与添加 HTML 属性类似。但是,由于`quantity`的值是整数,所以它不会加引号,但应该用花括号括起来,例如`{100}`。这个语法告诉 JSX 直接将花括号中的值解释为 JavaScript。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --hints--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
应该渲染`ShoppingCart`组件。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
assert(
|
|
|
|
|
(function () {
|
|
|
|
|
const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
|
|
|
|
|
return mockedComponent.find('ShoppingCart').length === 1;
|
|
|
|
|
})()
|
|
|
|
|
);
|
2018-10-10 22:03:03 +00:00
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
应该渲染`Items`组件。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
|
|
|
|
```js
|
2020-12-16 07:37:30 +00:00
|
|
|
|
assert(
|
|
|
|
|
(function () {
|
|
|
|
|
const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
|
|
|
|
|
return mockedComponent.find('Items').length === 1;
|
|
|
|
|
})()
|
|
|
|
|
);
|
2018-10-10 22:03:03 +00:00
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
`Items`组件应该有一个`{ quantity: 10 }`的prop,该 prop 是从`ShoppingCart`组件传递过去的。
|
2020-09-17 16:13:42 +00:00
|
|
|
|
|
2018-10-10 22:03:03 +00:00
|
|
|
|
```js
|
2020-12-16 07:37:30 +00:00
|
|
|
|
(getUserInput) =>
|
|
|
|
|
assert(
|
|
|
|
|
(function () {
|
|
|
|
|
const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
|
|
|
|
|
return (
|
|
|
|
|
mockedComponent.find('Items').props().quantity == 10 &&
|
|
|
|
|
getUserInput('index')
|
|
|
|
|
.replace(/ /g, '')
|
|
|
|
|
.includes('<Itemsquantity={10}/>')
|
|
|
|
|
);
|
|
|
|
|
})()
|
|
|
|
|
);
|
2018-10-10 22:03:03 +00:00
|
|
|
|
```
|
2020-08-13 15:24:35 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --solutions--
|
|
|
|
|
|