props
أو خصائص. هذا التحدي يبحث في كيف يمكن تمرير الصفائف props
. لتمرير مصفوفة إلى عنصر JSX ، يجب التعامل معها على هيئة JavaScript وملفوفة في أقواس معقوفة. <ParentComponent>المكون الفرعي ثم الوصول إلى
<ChildComponent colors = {["green"، "blue"، "red"]} />
</ ParentComponent>
colors
خاصية الصفيف. يمكن استخدام أساليب المصفوفة مثل join()
عند الوصول إلى الخاصية. const ChildComponent = (props) => <p>{props.colors.join(', ')}</p>
سينضم هذا إلى كل عناصر صفيف colors
في سلسلة مفصولة بفواصل وينتج: <p>green, blue, red</p>
لاحقًا ، سنتعرف على الطرق الشائعة الأخرى لتقديم صفائف البيانات في React. List
ومكونات ToDo
في محرر التعليمات البرمجية. عند تقديم كل List
من المكون ToDo
، قم بتمرير خاصية tasks
معينة إلى صفيف مهام المهام ، على سبيل المثال ["walk dog", "workout"]
. ثم قم بالوصول إلى مصفوفة tasks
هذه في مكون List
، مع إظهار قيمته داخل العنصر p
. استخدم join(", ")
لعرض مصفوفة props.tasks
في عنصر p
كقائمة مفصولة بفواصل. يجب أن تحتوي قائمة اليوم على مهمتين على الأقل ويجب أن تشتمل مهام الغد على 3 مهام على الأقل. ToDo
بإرجاع div
خارجي واحد.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().type() === "div"; })(), "The ToDo
component should return a single outer div
.");'
- text: يجب أن يكون الطفل الثالث لمكون ToDo
نسخة من مكون List
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(2).name() === "List"; })(), "The third child of the ToDo
component should be an instance of the List
component.");'
- text: يجب أن يكون الطفل الخامس من المكون ToDo
نسخة من مكون List
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(4).name() === "List"; })(), "The fifth child of the ToDo
component should be an instance of the List
component.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return Array.isArray(mockedComponent.find("List").get(0).props.tasks) && Array.isArray(mockedComponent.find("List").get(1).props.tasks); })(), "Both instances of the List
component should have a property called tasks
and tasks
should be of type array.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find("List").get(0).props.tasks.length >= 2; })(), "The first List
component representing the tasks for today should have 2 or more items.");'
- text: يجب أن يشتمل عنصر List
الثاني الذي يمثل مهام الغد على 3 عناصر أو أكثر.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find("List").get(1).props.tasks.length >= 3; })(), "The second List
component representing the tasks for tomorrow should have 3 or more items.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find("p").get(0).props.children === mockedComponent.find("List").get(0).props.tasks.join(", ") && mockedComponent.find("p").get(1).props.children === mockedComponent.find("List").get(1).props.tasks.join(", "); })(), "The List
component should render the value from the tasks
prop in the p
tag as a comma separated list, for example walk dog, workout
.");'
```
{}
{ /* change code above this line */ } }; class ToDo extends React.Component { constructor(props) { super(props); } render() { return (