state
. تتكون الولاية من أي بيانات يحتاج معرفتك إلى معرفتها ، والتي يمكن أن تتغير بمرور الوقت. تريد أن تستجيب تطبيقاتك لتغييرات الحالة وأن تقدم واجهة مستخدم محدثة عند الضرورة. React يقدم حلا لطيفا لإدارة الدولة لتطبيقات الويب الحديثة. يمكنك إنشاء حالة في مكون React بواسطة تعريف خاصية state
في فئة المكون في constructor
. يقوم هذا بتهيئة المكون state
عند إنشائه. يجب تعيين خاصية state
إلى object
JavaScript. الإعلان عن هذا الشكل: this.state = {
// وصف الولاية الخاصة بك هنا
} يمكنك الوصول إلى كائنstate
طوال عمر المكون الخاص بك. يمكنك تحديثه ، وجعله في واجهة المستخدم الخاصة بك ، وتمريره على شكل دعائم لمكونات الطفل. يمكن أن يكون كائنstate
معقدًا أو بسيطًا مثلما تحتاج إليه. لاحظ أنه يجب إنشاء مكون فئة بتوسيعReact.Component
لإنشاءstate
مثل هذا.
name
العقار من في state
. ومع ذلك ، لا توجد state
محددة. قم بتهيئة المكون state
في constructor
وتعيين اسمك إلى خاصية name
. StatefulComponent
ثم تقديم.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("StatefulComponent").length === 1; })(), "StatefulComponent
should exist and render.");'
- text: يجب أن يقدم StatefulComponent
div
و عنصر h1
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("div").length === 1 && mockedComponent.find("h1").length === 1; })(), "StatefulComponent
should render a div
and an h1
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 StatefulComponent
should be initialized with a property name
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 name
in the state of StatefulComponent
should render in the h1
element.");'
```