68 lines
2.2 KiB
Markdown
68 lines
2.2 KiB
Markdown
|
---
|
||
|
|
id: 5a24c314108439a4d403616b
|
||
|
|
title: Use Default Props
|
||
|
|
challengeType: 6
|
||
|
|
isRequired: false
|
||
|
|
videoUrl: ''
|
||
|
|
localeTitle: استخدام الدعائم الافتراضية
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id="description"> يحتوي React أيضًا على خيار لتعيين الأدوات الافتراضية. يمكنك تعيين الدعائم الافتراضية لمكون كخاصية على المكون نفسه ويقوم React بتعيين الدعامة الافتراضية إذا لزم الأمر. هذا يسمح لك بتحديد قيمة prop يجب أن تكون إذا لم يتم توفير أي قيمة بشكل صريح. على سبيل المثال ، إذا قمت بتعريف <code>MyComponent.defaultProps = { location: 'San Francisco' }</code> ، فقد قمت بتعريف موقع دعامة تم تعيينه على السلسلة <code>San Francisco</code> ، ما لم تحدد خلاف ذلك. يقوم React بتعيين الدعائم الافتراضية إذا كانت الدعائم غير محددة ، ولكن إذا قمت بتمرير قيمة <code>null</code> كقيمة للدعم ، فسيظل <code>null</code> . </section>
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
undefined
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests:
|
||
|
|
- text: ''
|
||
|
|
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("ShoppingCart").length === 1; })(), "The <code>ShoppingCart</code> component should render.");'
|
||
|
|
- text: ''
|
||
|
|
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); mockedComponent.setProps({items: undefined}); return mockedComponent.find("ShoppingCart").props().items === 0; })(), "The <code>ShoppingCart</code> component should have a default prop of <code>{ items: 0 }</code>.");'
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
|
||
|
|
<div id='jsx-seed'>
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
const ShoppingCart = (props) => {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<h1>Shopping Cart Component</h1>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
};
|
||
|
|
// change code below this line
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
### After Test
|
||
|
|
<div id='jsx-teardown'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
console.info('after the test');
|
||
|
|
```
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
// solution required
|
||
|
|
```
|
||
|
|
</section>
|