Así que tengo una aplicación React montada que se representa así (es a través de otro marco en la parte superior):

 const componentRender = (entryComponent, initialProps, targetNode) => { const root = createRoot(targetNode); const element = createElement(entryComponent, initialProps); const wrapper = createElement(SomeWrapper, null, element); root.render(wrapper); }

En el nivel superior, llamo:

 Ext.extend(Ext.Container, { listeners: { afterrender: function () { this.root = componentRender( MyComponent, this.myProps, domElement ); }, }, constructor: function (...args) { Object.assign(this, args); }, onServerSuccess: function(data) { // here is where I receive new data this.myProps = data; } });

En esencia, cuando se carga el componente EXT, inserto React en la página. Entonces, lo que puedo hacer es onServerSuccess (cuando recibo los datos que quiero), puedo usar this.root.unmount() y volver a montar el componente. Sin embargo, montar y desmontar repetidamente no es realmente la mejor solución. Lo que estoy tratando de hacer es quizás hacer que this.myProps sea "reactivo" para que cada vez que cambien, el componente sepa y se vuelva a renderizar sin tener que desmontarlo y volver a montarlo.

Tal vez hay una mejor solución por ahí?