【React】循环渲染组件

72 阅读 0 评论 48 点赞

我是靠谱客的博主聪明面包，这篇文章主要介绍【React】循环渲染组件，现在分享给大家，希望可以做个参考。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class InputGroup extends React.Component {
state = {
fileList: [{
name: 'xxx.png',
status: 'done',
}],
};
render() {
const { fileList } = this.state;
const inputPile = [];
//定义一个数组
for (let i = 0; i < fileList.length; i+=1) {
// for循环数组
inputPile.push(
//将组件塞入定义的数组中
<Input placeholder='排序' data-index={i}
/>
//index为自定义属性
);
}
return (
<div>
{inputPile} //引用
</div>
);
}
}