文章目录

我的网站

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

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

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"));