Array.map()
في Array.map()
يوضح هذا المفهوم. على سبيل المثال ، يمكنك إنشاء تطبيق "قائمة المهام" البسيط. كمبرمج ، ليس لديك طريقة لمعرفة عدد العناصر التي قد يكون لدى المستخدم في قائمته. تحتاج إلى إعداد المكون الخاص بك لعرض العدد الصحيح لعناصر القوائم بشكل ديناميكي قبل أن يقرر شخص ما يستخدم البرنامج اليوم أن يكون يوم الغسيل. MyToDoList
تم إعداده. يجب أن يبدو بعض هذا الرمز مألوفًا إذا أكملت تحديًا للنموذج المتحكم فيه. ستلاحظ textarea
و button
، جنبا إلى جنب مع اثنين من الأساليب التي تتبع ولاياتهم، ولكن يتم تقديم أي شيء للالصفحة إلى الآن. داخل constructor
، إنشاء this.state
الكائن وتحديد دولتين: userInput
يجب تهيئة باعتبارها سلسلة فارغة، و toDoList
يجب تهيئة كصفيف فارغة. بعد ذلك ، قم بحذف التعليق في طريقة العرض render()
بجوار متغير items
. في مكانها، خريطة على toDoList
مجموعة المخزنة في الحالة الداخلية للمكون حيوي وتجعل من li
لكل عنصر. حاول إدخال سلسلة eat, code, sleep, repeat
في textarea
، ثم انقر فوق الزر وشاهد ما يحدث. ملاحظة: قد تعرف أن جميع العناصر الفرعية التابعة التي تم إنشاؤها بواسطة عملية تعيين مثل هذه تحتاج إلى أن يتم توفيرها بسمة key
فريدة. لا تقلق ، هذا هو موضوع التحدي التالي. MyToDoList
عنصر textarea
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find("MyToDoList").children().childAt(0).type() === "textarea"; })(), "The first child of MyToDoList
should be a textarea
element.");'
- text: يجب أن يكون الطفل الثالث من MyToDoList
عنصر button
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find("MyToDoList").children().childAt(2).type() === "button"; })(), "The third child of MyToDoList
should be a button
element.");'
- text: حالة MyToDoList
يجب تهيئة مع toDoList
كصفيف فارغة.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return Array.isArray(initialState.toDoList) === true && initialState.toDoList.length === 0; })(), "The state of MyToDoList
should be initialized with toDoList
as an empty array.");'
- text: حالة MyToDoList
يجب تهيئة مع userInput
باعتبارها سلسلة فارغة.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return typeof initialState.userInput === "string" && initialState.userInput.length === 0; })(), "The state of MyToDoList
should be initialized with userInput
as an empty string.");'
- text: ''
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const simulateChange = (el, value) => el.simulate("change", {target: {value}}); const state_1 = () => { return waitForIt(() => mockedComponent.find("ul").find("li"))}; const setInput = () => { return waitForIt(() => simulateChange(mockedComponent.find("textarea"), "testA, testB, testC"))}; const click = () => { return waitForIt(() => mockedComponent.find("button").simulate("click"))}; const state_2 = () => { return waitForIt(() => { const nodes = mockedComponent.find("ul").find("li"); return { nodes, text: nodes.reduce((t, n) => t + n.text(), "") }; })}; const setInput_2 = () => { return waitForIt(() => simulateChange(mockedComponent.find("textarea"), "t1, t2, t3, t4, t5, t6"))}; const click_1 = () => { return waitForIt(() => mockedComponent.find("button").simulate("click"))}; const state_3 = () => { return waitForIt(() => { const nodes = mockedComponent.find("ul").find("li"); return { nodes, text: nodes.reduce((t, n) => t + n.text(), "") }; })}; const awaited_state_1 = await state_1(); const awaited_setInput = await setInput(); const awaited_click = await click(); const awaited_state_2 = await state_2(); const awaited_setInput_2 = await setInput_2(); const awaited_click_1 = await click_1(); const awaited_state_3 = await state_3(); assert(awaited_state_1.length === 0 && awaited_state_2.nodes.length === 3 && awaited_state_3.nodes.length === 6 && awaited_state_2.text === "testA testB testC" && awaited_state_3.text === "t1 t2 t3 t4 t5 t6", "When the Create List
button is clicked, the MyToDoList
component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the textarea
element."); }; '
```