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 屬性沒有使用到，還要再研究下