44 lines
1.0 KiB
Markdown
44 lines
1.0 KiB
Markdown
---
|
||
title: Pass an Array as Props
|
||
localeTitle: 将数组作为道具传递
|
||
---
|
||
## 将数组作为道具传递
|
||
|
||
要将数组作为prop传递，首先必须在要呈现的每个组件上将数组声明为“tasks”prop：
|
||
|
||
```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>
|
||
);
|
||
}
|
||
};
|
||
```
|
||
|
||
然后，必须在“List”组件内处理props：
|
||
|
||
```javascript
|
||
const List= (props) => {
|
||
return <p>{props.tasks.join(", ")}</p>
|
||
};
|
||
|
||
// ... same as above
|
||
```
|
||
|
||
`.join(", ")`方法用于从数组中获取每个元素，并将它们连接到要显示的字符串中。
|
||
|
||
我们在此示例中使用React的模块化来显示由两个不同组件传递给渲染最终HTML的公共组件的任务。 |