Question

当 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} />

添加 render()

我想创建一个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？或者任何其他想法如何解决这个问题？

Answer 1

实际上，问题在于 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
}

当可观察到的变化时如何使用 mobx 更新 antd 表

1 个答案: