Tengo el requisito de usar un SDK en un proyecto creado con React. El SDK es responsable de representar la interfaz de usuario al agregarla como elemento secundario a un HTMLElement que recibe como entrada durante la inicialización.

Hay dos problemas que no he encontrado antes en las aplicaciones React y me pregunto cuál sería la mejor manera de hacerlo.

1: El SDK toma un HTMLElement y no un ReactElement.

 const mySDK = new fooSDK(); // create an empty container for the SDK to mount later const myContainer = document.createElement('div'); // set the element for the SDK to render children to later mySDK.setContainer(myContainer);

Sé que usar una referencia aquí es una opción, pero el siguiente problema afecta la implementación general.

2: el SDK requiere configurar una devolución de llamada en el objeto de ventana, al que el SDK llama cuando está listo. La devolución de llamada debe encapsular toda la lógica anterior.

 const myModule = () => { const mySDK = new fooSDK(); // create an empty container for the SDK to mount later const myContainer = document.createElement('div'); // set the element for the SDK to render children to later mySDK.setContainer(myContainer); };

Y luego se usa así

 window.sdkCallback = myModule;

Esta configuración es bastante poco idiomática en React y usar este SDK en particular es un requisito difícil. La aplicación React sirve la interfaz de usuario desde un servidor Express, así que tenga un poco más de control allí.

Un enfoque que estoy considerando es crear una nueva ruta en mi aplicación Express y manejar esta lógica DOM nativa allí.

No estoy seguro de si este es un buen enfoque, así que estoy abierto a cualquier sugerencia. Sería bueno envolver esta lógica en un componente React o algo por modularidad, pero incluso hacer que funcione es un buen comienzo.

¡Gracias!