44 lines
1.6 KiB
Markdown
44 lines
1.6 KiB
Markdown
|
---
|
|||
|
|
title: Pass an Array as Props
|
|||
|
|
localeTitle: Передайте массив как реквизит
|
|||
|
|
---
|
|||
|
|
## Передайте массив как реквизит
|
|||
|
|
|
|||
|
|
Чтобы передать массив в качестве опоры, сначала массив должен быть объявлен как «задача» для каждого из компонентов, подлежащих визуализации:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const List= (props) => {
|
|||
|
|
return <p></p>
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
class ToDo extends React.Component {
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
}
|
|||
|
|
render() {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<h1>To Do Lists</h1>
|
|||
|
|
<h2>Today</h2>
|
|||
|
|
<List tasks={["Walk", "Cook", "Bake"]} />
|
|||
|
|
<h2>Tomorrow</h2>
|
|||
|
|
<List tasks={["Study", "Code", "Eat"]}/>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Затем реквизит должен быть обработан внутри компонента «Список»:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const List= (props) => {
|
|||
|
|
return <p>{props.tasks.join(", ")}</p>
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ... same as above
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Метод `.join(", ")` используется для `.join(", ")` каждого элемента из массива и объединения его в строку, которая должна отображаться.
|
|||
|
|
|
|||
|
|
В этом примере мы используем модульность React, чтобы отображать задачи, переданные двумя различными компонентами, на общий компонент, который отображает окончательный HTML.
|