问题描述
当 selectedId
属性更改时,我的 antd 表没有更新:
rowClassName={row => row.id === this.model.selectedId
? row.nameWithTypeAndRunType.type + " " + SELECTED_ROW_CSS_CLASS
: row.nameWithTypeAndRunType.type
}
const MyTable = (viewmodel: MyModel) => (
<Table<MyModel>
........
并使用 <MyTable {...this.myModel} />
我想创建一个RTable,以便我通常可以方便地使用antd table。我试过这个:
export function RTable<recordtype extends object = any>(props: TableProps<recordtype>): JSX.Element {
const t = <Observer>{() => <Table {...props} />}</Observer>
return t
}
比我在 render() 中使用 RTable 而不是 Table tag ,但没有运气,table 不会更新。 任何想法在 RTable 函数中做什么来强制更新 Table? 或者任何其他想法如何解决这个问题?
解决方法
实际上,问题在于 rowClassName 是一个函数,而 mobx 只能对属性更改做出反应。 所以我们所做的是将 selectedId 作为属性传递,以便 mobx 检测到更改并重新渲染组件:
export interface RTableProperties<RecordType extends object = any> extends TableProps<RecordType> {
selectedRecordId: string | undefined
}
export function RTable<RecordType extends object = any>(rTableProps: RTableProperties<RecordType>): JSX.Element {
const rTable = <Table {...rTableProps} />
return rTable
}