4.1 KiB
4.1 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036170 | Create a Stateful Component | 6 | false | إنشاء مكون Stateful |
Description
state
. تتكون الولاية من أي بيانات يحتاج معرفتك إلى معرفتها ، والتي يمكن أن تتغير بمرور الوقت. تريد أن تستجيب تطبيقاتك لتغييرات الحالة وأن تقدم واجهة مستخدم محدثة عند الضرورة. React يقدم حلا لطيفا لإدارة الدولة لتطبيقات الويب الحديثة. يمكنك إنشاء حالة في مكون React بواسطة تعريف خاصية state
في فئة المكون في constructor
. يقوم هذا بتهيئة المكون state
عند إنشائه. يجب تعيين خاصية state
إلى object
JavaScript. الإعلان عن هذا الشكل: this.state = {
// وصف الولاية الخاصة بك هنا
} يمكنك الوصول إلى كائنstate
طوال عمر المكون الخاص بك. يمكنك تحديثه ، وجعله في واجهة المستخدم الخاصة بك ، وتمريره على شكل دعائم لمكونات الطفل. يمكن أن يكون كائنstate
معقدًا أو بسيطًا مثلما تحتاج إليه. لاحظ أنه يجب إنشاء مكون فئة بتوسيعReact.Component
لإنشاءstate
مثل هذا.
Instructions
name
العقار من في state
. ومع ذلك ، لا توجد state
محددة. قم بتهيئة المكون state
في constructor
وتعيين اسمك إلى خاصية name
. Tests
tests:
- text: يجب أن توجد <code>StatefulComponent</code> ثم تقديم.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("StatefulComponent").length === 1; })(), "<code>StatefulComponent</code> should exist and render.");'
- text: يجب أن يقدم <code>StatefulComponent</code> <code>div</code> و عنصر <code>h1</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("div").length === 1 && mockedComponent.find("h1").length === 1; })(), "<code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === "object" && typeof initialState.name === "string"); })(), "The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find("h1").text() === initialState.name; })(), "The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.");'
Challenge Seed
class StatefulComponent extends React.Component {
constructor(props) {
super(props);
// initialize state here
}
render() {
return (
<div>
<h1>{this.state.name}</h1>
</div>
);
}
};
After Test
console.info('after the test');
Solution
// solution required