使用 mobx 继承 React 组件

Question

我有一个组件继承自抽象 class 并使用这样的 mobx 装饰器：

@inject("matrixStore")
@observer
export default class DayRow<T extends IAbstractRowProps = IAbstractRowProps> extends AbstractRow<T> {
     // ...
}

呈现函数本身存在于 AbstractRow 组件中。

我从 DayRow 继承了另一个组件：

@inject("matrixStore")
@observer
export default class DayFinderRow extends DayRow<IDayFinderRowProps> {
}

但是当我尝试渲染 DayFinderRow 时，mobx 发出警告： Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject'。然后我调试它说的渲染组件 inject-DayRow-with-matrixStore#0.render() 而不是预期的 DayFinderRow#0.render()

当我从 DayFinderRow 中删除装饰器时，警告消失了，但呈现的不是 DayFinderRow 组件而是 DayRow。

我需要两个组件上的装饰器，因为我渲染了两个组件，但我想从 DayRow 派生 DayFinderRow，因为我只需要更改一个函数的行为。

这可以用 mobx 实现吗？

Answer 1

Facebook说继承不合适。这是他们的解释和建议。

我没有充分的理由使用 React Component 作为蓝图。函数组合对我来说更有意义。

以下是面子书对此的说法：

https://reactjs.org/docs/composition-vs-inheritance.html

使用 mobx 继承 React 组件

Inherit react components with mobx

typescript

reactjs

mobx

mobx-react