state
في أحد المكونات. في الطريقة render()
، قبل عبارة return
، يمكنك كتابة JavaScript مباشرة. على سبيل المثال ، يمكنك الإعلان عن الدوال ، أو الوصول إلى البيانات من state
أو props
، أو إجراء عمليات حسابية على هذه البيانات ، وما إلى ذلك. بعد ذلك ، يمكنك تعيين أي بيانات للمتغيرات ، والتي يمكنك الوصول إليها في بيان return
. MyComponent
تقديم طريقة، تحديد const
يسمى name
وأضرموا فيه يساوي قيمة اسم في المكون state
. نظرًا لأنه يمكنك كتابة JavaScript مباشرة في هذا الجزء من الشفرة ، لن تضطر إلى تضمين هذا المرجع في أقواس معقوفة. بعد ذلك ، في بيان الإرجاع ، قم بعرض هذه القيمة في علامة h1
باستخدام name
المتغير. تذكر أنك تحتاج إلى استخدام بنية JSX (أقواس معقوفة لجافا سكريبت) في بيان الإرجاع. MyComponent
name
مفتاح مع القيمة freeCodeCamp
المخزنة في حالتها.
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "freeCodeCamp", "MyComponent
should have a key name
with value freeCodeCamp
stored in its state.");'
- text: يجب أن يقوم MyComponent
بعرض رأس h1
مغلق في div
مفرد.
testString: 'assert(/MyComponent
should render an h1
header enclosed in a single div
.");'
- text: 'يجب أن تتضمن العلامة h1
المقدمة إشارة إلى {name}
.'
testString: 'getUserInput => assert(/h1
tag should include a reference to {name}
.");'
- text: يجب أن يحتوي رأس h1
المقدمة على نص تم تقديمه من حالة المكوِّن.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === "h1
header should contain text rendered from the component's state."); };'
```
## Challenge Seed