简单table组件的封装

前言

写项目时一直用的都是封装好的table组件，对其内在并未深入了解，自己手动封装一个简单的组件，加深对各类封装好的table组件的了解。接下来的内容都是类比于antd中的table组件

注意： 既然是封装表格，那么就需要使表格尽可能符合多种业务场景，下面我封装的表格只针对业务内容展示进行处理，并不针对样式，样式也可类比。

首先要思考table组件需要什么？？？

1. 列数据（columns）- 即表头
2. 行数据（dataSource）- 每一行需要展示的内容

接下来进行封装

//APP.jsx
export default class App extends Component {
   
  render() {
   
  // 使用的是antd中所传数据格式
    const dataSource = [
      {
   
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
      },
      {
   
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园2号',
      },
      {
   
        key: '3',
        name: '胡彦文',
        age: 52,