【React笔记】react循环列表的写法

简单循环输出人名

循环输出people数组中的四个人名

import ReactDOM from 'react-dom/client';

const people = [
  '宋江',
  '卢俊义',
  '吴用',
  '公孙胜'
];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <List />
);

function List() {
  const listItems = people.map(person =>
    <li>{person}</li>
  );
  return <ul>{listItems}</ul>;
}

显示效果：

---

简单循环输出json格式数组

循环输出people数组中的四个键值对人名

import ReactDOM from 'react-dom/client';

const people = [
  {
    id: 1,
    name: '宋江',
    nickName: '呼保义'
  },
  {
    id: 2,
    name: '卢俊义',
    nickName: '玉麒麟'
  },
  {
    id: 3,
    name: '吴用',
    nickName: '智多星'
  },
  {
    id:4,
    name: '公孙胜',
    nickName: '入云龙'
  }
];

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <List />
);

function List() {
  const listItems = people.map(person =>
    <li>花名：{person.nickName} 真名： {person.name} </li>
  );
  return <ul>{listItems}</ul>;
}

显示效果：