Question

我有一个React表组件，该组件通过名为TableStore的道具获取数据。该道具是获取行数据的高级抽象：

interface TableStore<RowType> {
    getRowIds: () => Array<RowId>;
    getRow: (rowId: RowId) => RowType | undefined;
}

interface MaterialTableProps<RowType> {
    tableStore: TableStore<RowType>;
}

function MaterialTable<RowType>(props: MaterialTableProps<RowType>) {
    ...
}

您可以看到MaterialTable不是MobX观察者。它是不依赖MobX的组件库的一部分。

当我在应用程序中使用此组件时，会为其提供基于MobX的TableStore。每当基于MobX的商店发生更改时，我希望表组件重新呈现：

<MaterialTable tableStore={orderStore} />

但是，由于表组件不是MobX观察者，因此不会发生。有什么方法可以强制表组件重新呈现？例如，我可以通过取消引用父组件中的商店来强制重新渲染（使用简单的console.log()）。但这感觉就像是黑客。有更好的方法吗？

Answer 1

正在回答我自己的问题。...

我看了几个选项，但所有选项都很笨拙。我最终决定对表组件的道具进行重新设计，以使其通过数组而不是抽象的TableStore接口（表组件无法响应）。这使我避免将MobX作为对表组件库的依赖项添加，同时仍然在父组件中利用MobX。总之，父组件现在监视MobX存储，通过创建新数组并将其传递给表组件来对更改做出反应。

这是表格组件的新界面：

export interface MaterialTableProps<T extends Entity> extends TableProps {
    entityList: Array<T>;
}

export function MaterialTable<T extends Entity>(props: MaterialTableProps<T>) {
    ...
}

任何使React演示组件对MobX存储更改做出反应的方法

1 个答案: