螞蟻設計遞歸嵌套表不工作

Question

我想用遞歸嵌套表反應的組件框架：antd，但它並沒有這樣的工作：

import {Table, Badge, Menu, Dropdown, Icon} from 'antd'; 
export default class TreeTable extends React.Component { 

    constructor(props) { 
     super(props) 
     this.state = { 
      dataSource: [], 
      nestedData: [] 
     } 
    } 



    expandedRowRender(e) { 

     const nested_source = e.nest_data 

     const columns = this.props.nest_columns 

     return (
      <Table 
       columns={columns} 
       dataSource={nested_source} 
       pagination={false} 
       expandedRowRender={(e)=>{this.expandedRowRender(e)}} 
       title={()=>"一級崗位列表"} 
       showHeader={false} 
       size={"middle"} 
      /> 

     ); 
    } 

    render() { 
     const data_source = this.props.data_source.map((v, i)=> { 
      return {key: i, ...v} 
     }) 

     return (
      <div > 
       <Table 
        className="components-table-demo-nested" 
        columns={this.props.columns} 
        expandedRowRender={(e)=>::this.expandedRowRender(e)} 
        dataSource={data_source} 
       /> 
       { this.props.children } 
      </div> 
     ) 
    } 


} 

什麼都沒有發生，當我點擊第二個層次加桌上的按鈕，如何解決這個問題？這是一個錯誤？

Answer 1

首先我想回答你的第一個問題

這是一個錯誤的？

不，這不是一個錯誤。 當您沒有爲每個表格行設置唯一鍵值時，會發生這種情況。 將此代碼段添加到您的兩個「表格」標記中。

rowKey = {E => e._id}

例如： -

  <Table 
       rowKey = {e=> e._id} 
       className="components-table-demo-nested" 
       columns={this.props.columns} 
       expandedRowRender={(e)=>::this.expandedRowRender(e)} 
       dataSource={data_source} 
      />