freeCodeCamp/curriculum/challenges/arabic/03-front-end-libraries/react/use-default-props.arabic.md

2.2 KiB

id title challengeType isRequired videoUrl localeTitle
5a24c314108439a4d403616b Use Default Props 6 false استخدام الدعائم الافتراضية

Description

يحتوي React أيضًا على خيار لتعيين الأدوات الافتراضية. يمكنك تعيين الدعائم الافتراضية لمكون كخاصية على المكون نفسه ويقوم React بتعيين الدعامة الافتراضية إذا لزم الأمر. هذا يسمح لك بتحديد قيمة prop يجب أن تكون إذا لم يتم توفير أي قيمة بشكل صريح. على سبيل المثال ، إذا قمت بتعريف MyComponent.defaultProps = { location: 'San Francisco' } ، فقد قمت بتعريف موقع دعامة تم تعيينه على السلسلة San Francisco ، ما لم تحدد خلاف ذلك. يقوم React بتعيين الدعائم الافتراضية إذا كانت الدعائم غير محددة ، ولكن إذا قمت بتمرير قيمة null كقيمة للدعم ، فسيظل null .

Instructions

undefined

Tests

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>.");'

Challenge Seed

const ShoppingCart = (props) => {
  return (
    <div>
      <h1>Shopping Cart Component</h1>
    </div>
  )
};
// change code below this line

After Test

console.info('after the test');

Solution

// solution required