JSX里面循环生成多个子元素
文章目录

React: JSX里面循环生成多个子元素

用这个方法可以循环生成多个子元素

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
function Welcome(props) {
props.name = 'test';
return <h1>Hello, {props.name}</h1>;
}

function WelcomeList(nameList) {
var nameDOM = [];
for (var i = 0; i < nameList.length; i++) {
nameDOM.push(Welcome({name: nameList[i]}))
}
return nameDOM;
}

function Root() {
var nameList = ["Mike","Jack","Dick"];
return (
<div>
{WelcomeList(nameList)}
</div>
);
}

ReactDOM.render(
<Root />,
document.getElementById('root')
);