freeCodeCamp

3.4 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036163	Create a React Component	6	false		إنشاء مكون React

Description

والطريقة الأخرى لتعريف مكون React تكون مع بنية class ES6. في المثال التالي ، يقوم Kitten بتوسيع React.Component :

class Kitten يمد React.Component {
منشئ (الدعائم) {
السوبر (الدعائم)؛
}

يجعل() {
إرجاع (
<h1> تحليل مرحبا </ H1>
)؛
}
}

هذا ينشئ فئة ES6 Kitten الذي يمتد فئة React.Component . لذا ، أصبح بإمكان فئة Kitten الآن الوصول إلى العديد من ميزات React المفيدة ، مثل الخطافات المحلية ودورة الحياة. لا تقلق إذا لم تكن على دراية بهذه الشروط حتى الآن ، سيتم تغطيتها بمزيد من التفصيل في تحديات لاحقة. لاحظ أيضًا أن فئة Kitten بها constructor مُعرَّف داخلها يستدعي super() . ويستخدم super() لاستدعاء منشئ الفئة الأصل ، في هذه الحالة React.Component . المنشئ هو طريقة خاصة تستخدم أثناء تهيئة الكائنات التي يتم إنشاؤها باستخدام الكلمة الأساسية class . ومن أفضل الممارسات لاستدعاء المكون constructor مع super ، وتمرير props على حد سواء. هذا يجعل من تهيئة المكون بشكل صحيح. في الوقت الحالي ، اعلم أنه من المعتاد تضمين هذا الرمز. قريبا سترى استخدامات أخرى للمنشئ وكذلك props .

Instructions

undefined

Tests

tests:
  - text: يجب أن يعيد مكون React عنصر <code>div</code> .
    testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).type() === "div", "The React component should return a <code>div</code> element.");'
  - text: يجب على <code>div</code> إرجاعه عرض رأس <code>h1</code> بداخله.
    testString: 'assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()), "The returned <code>div</code> should render an <code>h1</code> header within it.");'
  - text: يجب أن يحتوي رأس <code>h1</code> على السلسلة <code>Hello React!</code> .
    testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).html() === "<div><h1>Hello React!</h1></div>", "The <code>h1</code> header should contain the string <code>Hello React!</code>.");'

Challenge Seed

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // change code below this line



    // change code above this line
  }
};

After Test

console.info('after the test');

Solution

// solution required

3.4 KiB Raw Blame History