Fondo

Tengo un problema con la integración dinámica de componentes. Estoy trabajando en un CMS, que permitirá agregar componentes CMS aleatorios, que están escritos en reaccionar. Cada componente representa su propio div, todos los componentes están completamente separados. No saben sobre la existencia de otros componentes. Creo que no es la "manera de reaccionar" de hacer las cosas, pero esto es lo que tengo en mi proyecto, y reescribir todo no es una opción.

En general, este enfoque funciona bien, por ejemplo, cuando los componentes se agregan uno al lado del otro, uno tras otro. Sin embargo, tengo pocos componentes, que pueden incrustar otros componentes. Quiero reutilizar los componentes tanto como sea posible.

Intentaré describir un ejemplo: digamos que tengo un componente Teaser, que representa una imagen y, opcionalmente, el Editor puede agregar al componente Teaser otros componentes: Texto y/o Botón. Entonces, al final, el componente teaser solo puede tener una imagen, a veces una imagen y dos botones, y otras veces una imagen, un texto y el botón.

El editor de CMS agrega todos los componentes, por lo que cuando coloco el botón en una página, se mostrará un botón. Cuando el editor agregue un teaser, se renderizará solo (sin componentes secundarios todavía).

Cuál es el problema/pregunta:

Cuando Editor ahora agrega un botón al componente teaser, no sé cómo manejarlo correctamente.

Cuando se agrega un componente, debe agregarse fuera del div raíz del componente Teaser; de lo contrario, el componente Teaser eliminará cualquier componente incrustado.

Lo que podría hacer, podría tener un registro de componentes, y cuando, por ejemplo, se agrega Button al componente Teaser, podría pasar los parámetros JSON del componente Button a los parámetros del componente teaser como, por ejemplo, una matriz de niños, y Teaser tendrá una lógica para ejemplo basado en alguna propiedad, tomará el componente apropiado (Botón) del Registro de componentes y lo renderizará, sin embargo , cuando el componente se agrega al teaser, ya que es un componente CMS completamente independiente, no sabe que debe renderizarse por el componente teaser. Entonces lo que tendré:

1. Se agrega el botón, por lo que representará un botón,
2. Se le notificará a Teaser que algo ha cambiado, por lo que se representará a sí mismo y a los niños, por lo que el botón se representará dos veces.
3. Lo mismo sucederá al renderizar una página: Teaser se renderizará solo, luego Button se renderizará solo

¿Alguna idea de cómo se puede resolver tal caso?