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