reactjs - 蚂蚁设计递归嵌套表不起作用

Question

我想在 react 的组件框架中使用递归嵌套表：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}
            />