列表渲染

当前模拟的是：列表中的数据要分给不同的组件渲染，每个item是有多个模块拼凑起来的。

import { Fragment } from 'react'

// 数据源
const dataSource = [
  {
    a: 1,
    b: 1,
  },
  {
    a: 2,
    b: 2,
  },
]

// 循环
const InfiniteList = ({ dataSource, itemRender }) => {
  return dataSource.map((dataItem, dataIndex) => <Fragment key={dataIndex}>{itemRender({ ...dataItem })}</Fragment>)
}

// item的子项1
const NoteCard = props => <h1>{props.a}</h1>

// item的子项2
const NoteComment = props => <p>{props.b}</p>

// 每一个item
const NoteWrapper = props => (
  <Fragment>
    <NoteCard {...props} />
    <NoteComment {...props} />
  </Fragment>
)

const NoteList = ({ dataSource }) => <InfiniteList dataSource={dataSource} itemRender={NoteWrapper} />