freeCodeCamp

3.0 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d403616c	Override Default Props	6	false		تجاوز الدعائم الافتراضية

Description

تعد القدرة على ضبط الأدوات الافتراضية هي ميزة مفيدة في React. تتمثل طريقة تجاوز الدعائم الافتراضية في تعيين قيم الدعامة للمكون بشكل صريح.

Instructions

مكون ShoppingCart الآن يعرض Items مكون تابعة. يحتوي مكون Items هذا على quantity prop افتراضية تعيين إلى عدد صحيح 0 . تجاوز الدعامة الافتراضية بتمرير قيمة 10 quantity . ملاحظة: تذكر أن بناء الجملة لإضافة دعامة إلى أحد المكونات يشبه الطريقة التي تضيف بها سمات HTML. ومع ذلك ، نظرًا لأن القيمة quantity هي عدد صحيح ، فلن يتم نقلها بين علامتي اقتباس ولكن يجب أن تكون ملفوفة في أقواس معقوفة. على سبيل المثال ، {100} . يخبر هذا التركيب JSX بتفسير القيمة داخل الأقواس مباشرة مثل JavaScript.

Tests

tests:
  - text: ''
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("ShoppingCart").length === 1; })(), "The component <code>ShoppingCart</code> should render.");'
  - text: ''
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("Items").length === 1; })(), "The component <code>Items</code> should render.");'
  - text: ''
    testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("Items").props().quantity == 10 && getUserInput("index").replace(/ /g,"").includes("<Itemsquantity={10}/>"); })(), "The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component.");'

Challenge Seed

const Items = (props) => {
  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
}

Items.defaultProps = {
  quantity: 0
}

class ShoppingCart extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    { /* change code below this line */ }
    return <Items />
    { /* change code above this line */ }
  }
};

After Test

console.info('after the test');

Solution

// solution required

3.0 KiB Raw Blame History