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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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"];
/* 很简单, 使用一个函数输出 JSX 即可 */
return <div>{WelcomeList(nameList)}</div>;
}

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