前端模拟数据的4种技术方案

let listData = [{id: ‘001‘, name: ‘banana‘},{id: ‘002‘, name: ‘orange‘},{id: ‘003‘, name: ‘apple‘}];

// render函数
render() {
    let {data} = this.props;

    return (
      <div>
        <table>
          <tbody>
            <tr><th>id</th><th>name</th></tr>
            {
              data.map((item, i) => {
                return <tr key={i}><td>{item.id}</td><td>{item.name}</td></tr>
              })
            }
          </tbody>
        </table>
      </div>
    );
  }


// defaultprops
FakeData.defaultProps = {
  ‘data‘: [
      {
          ‘id‘: ‘001‘,
          ‘name‘: ‘banana‘
      },
      {
          ‘id‘: ‘002‘,
          ‘name‘: ‘orange‘
      },
      {
          ‘id‘: ‘003‘,
          ‘name‘: ‘apple‘
      }
  ]
};