列表数据渲染

class ListRender extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userInfo: [
        { name: 'tom', age: 18, habbits: 'baseball' },
        { name: 'jerry', age: 20, habbits: 'tennis' },
        { name: 'Mike', age: 19, habbits: 'football' },
        { name: 'Jenny', age: 30, habbits: 'ice hockey' }
      ],
      tableHead: ['姓名', '年龄', '喜好']
    };
  }

  render() {
    let header = [];
    let content = [];
    this.state.tableHead.forEach((element, index) => {
      header.push(<td key={`title-${index}`}>{element}</td>);
    });
    this.state.userInfo.forEach((element, index) => {
      content.push(
        <tr key={`user-${index}`}>
          <td>{element.name}</td>
          <td>{element.age}</td>
          <td>{element.habbits}</td>
        </tr>
      );
    });
    return (
      <div className="table">
        <table>
          <caption>用户信息</caption>
          <thead>
            <tr>{header}</tr>
          </thead>
          <tbody>{content}</tbody>
        </table>
      </div>
    );
  }
}