react项目实战问题点记录（想起一点记一点，就是这么摸不着头脑）

react项目实战问题点记录（想起一点记一点，就是这么摸不着头脑）

1、antd-table组件嵌套子表（根据是否有子表数据绑定对应扩展行：绑定多个行类名）

//组件内容
 <table
    columns={this.columns}
    dataSource={tableRowDatas}
    onChangePage={this.onChangePage}
    total={total}
    pageNum={pageNum}
    pageSize={pageSize}
    // expandedRowRender={null}
    // expandedRowRender={expandedRowRender}
    expandedRowRender={(record, index, indent, expanded)=>(record&&record.historyinfo&&record.historyinfo.length ?expandedRowRender(record, index, indent, expanded) :false)}
    locale={locale}
    rowClassName={(record, index, indent, expanded)=>([record&&record.historyinfo&&record.historyinfo.length ?'expandediconshow' :'expandediconhide',index % 2 ? 'even' : 'odd'])}/>
样式内容
.tabox{
    :global{
        .expandediconhide .ant-table-row-expand-icon{
            display: none;
        }
    }
}
//假数据内容
 let tableRowDatas=[
    {
        contractBillCode:"12" ,
        contractNumber:"22" ,
        contractName:"32" ,
        ascriptionDepartment:"42" ,
        effectiveDate:"52" ,
        otherCompanyName:"62" ,
        totalAmount:"72" ,
        historyinfo:[
            {
                "changeContent":"合同金额变更",
            }
        ]
    },
    {
        contractBillCode:"11" ,
        contractNumber:"21" ,
        contractName:"31" ,
        ascriptionDepartment:"41" ,
        effectiveDate:"51" ,
        otherCompanyName:"61" ,
        totalAmount:"71" ,
        historyinfo:[]
    }
]

效果图：
2、table组件中使用勾选框不能正确勾选问题，参考该博主才发现（https://blog.csdn.net/xlszzck/article/details/82462699）
一定要加上rowKey="id"或者rowKey={record => record.id}，后来经过多次调试发现很多BUG都跟这个参数有关，不然会导致联动的选择框状态异常。id可以自定义为dataSource中的某个值。