Antd table expandedRowRender 属性小结

最近在使用阿里的antd，用到了Table组件，在Table组件中使用expandedRowRender 这个属性的时候遇到了未知的坑，数据是有的，但是点击+没有任何反应，网上资料都是源数据中需要加上key字段，如果源数据无法提供key字段，在Table中需要提供rowKey属性<Table rowKey="uid" />;

但是但是，我在拿到源数据的时候给数据再封装了一层，加上了key，然而点击+号还是没有反应，后续原因再慢慢探索，先记录下错误。

最后在表单中实现列表展开项是使用了children这个属性，就是给源数据拼上children字段

如：

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  key: 'name',
}, {
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
  width: '12%',
}, {
  title: 'Address',
  dataIndex: 'address',
  width: '30%',
  key: 'address',
}];


const data = [{
  key: 1,
  name: 'John Brown sr.',
  age: 60,
  address: 'New York No. 1 Lake Park',
  children: [{
    key: 11,
    name: 'John Brown',
    age: 42,
    address: 'New York No. 2 Lake Park',
  }, {
    key: 12,
    name: 'John Brown jr.',
    age: 30,
    address: 'New York No. 3 Lake Park',
    children: [{
      key: 121,
      name: 'Jimmy Brown',
      age: 16,
      address: 'New York No. 3 Lake Park',
    }],
  }, {
    key: 13,
    name: 'Jim Green sr.',
    age: 72,
    address: 'London No. 1 Lake Park',
    children: [{
      key: 131,
      name: 'Jim Green',
      age: 42,
      address: 'London No. 2 Lake Park',
      children: [{
        key: 1311,
        name: 'Jim Green jr.',
        age: 25,
        address: 'London No. 3 Lake Park',
      }, {
        key: 1312,
        name: 'Jimmy Green sr.',
        age: 18,
        address: 'London No. 4 Lake Park',
      }],
    }],
  }],
}, {
  key: 2,
  name: 'Joe Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park',
}];
<Table columns={columns}  dataSource={data} />,

注意这个时候Table控件中是不能设置rowkey属性了，因为在children中设置了key，如果忘记去掉rowkey属性，估计你会一直在找错误，因为一直报key值重复的错误

warning.js:33 Warning: flattenChildren(...): Encountered two children with the same key, `0`. Child keys must be unique; when two children share a key, only the first child will be used.
    in tbody (created by Table)
    in table (created by Table)
    in div (created by Table)
    in span (created by Table)
    in div (created by Table)
    in div (created by Table)
    in div (created by Table)
    in Table (created by Table)
    in div (created by Spin)
    in div (created by Spin)
    in Spin (created by Table)
    in div (created by Table)
    in Table (created by SelectTransModel)
    in div (created by Dialog)
    in div (created by Dialog)
    in div (created by LazyRenderBox)
    in LazyRenderBox (created by Dialog)
    in AnimateChild (created by Animate)
    in Animate (created by Dialog)
    in div (created by Dialog)
    in div (created by Dialog)
    in Dialog

去掉之后可以正常展开列表了，expandedRowRender 属性没有使用到，还要再研究下