Búsqueda de sitios web

reactjs - Heredar componentes de react con mobx


Tengo un componente que hereda de una clase abstracta y usa decoradores de mobx así:

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

La función render en sí misma se encuentra en el componente AbstractRow.

Heredo de DayRow con otro componente:

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

Pero cuando intento renderizar DayFinderRow hay una advertencia de mobx: Mobx observer: Estás intentando usar 'observer' en un componente que ya tiene 'inject'. Por favor aplica 'observer' antes de aplicar 'inject'. Y cuando depuro el componente renderizado dice inject-DayRow-with-matrixStore#0.render() en lugar del anticipado DayFinderRow#0.render()

Cuando quito los decoradores de DayFinderRow, la advertencia desaparece, pero en lugar de un componente DayFinderRow se renderiza un DayRow.

Necesito los decoradores en ambos componentes, ya que renderizo ambos, pero quiero derivar DayFinderRow de DayRow, porque solo necesito cambiar el comportamiento de una función.

¿Es esto posible con mobx?

Respuesta #1

Facebook dice que la herencia no es adecuada. Aquí está su explicación y recomendaciones.

No hay una buena razón para que use un Componente de React como plano. La composición de funciones tiene más sentido para mí.

Esto es lo que Facebook dice al respecto:

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