En un proyecto de ReactJs intento analizar con com.wiris.js.JsPluginViewer.parseElement(ref, true, function () {}); función.

Según los documentos, esa función se aplicará a elementos específicos en el DOM. En las muestras con javascript puro, primero configuran el HTML interno del elemento dom y luego aplican la función.

Entonces pensé que se manejaría usando refs en React. (no estoy seguro si es la mejor manera)

Tengo una matriz que incluye una cadena para representarla como html. Tomé todas las referencias como una matriz con useRef([]) y luego configuré la referencia de cada elemento usando refs.current[index]

De acuerdo con el tipo, renderizo directamente la cadena con dangerouslySetInnerHTML o uso un componente contenedor para renderizar con un componente secundario en el que usaría esa función especial.

Pero no pude acceder a la propiedad innerHTML de la referencia antes de aplicar la función en WirisWrapper. ref.innerHTML y ref.current.innerHTML

Analizador como padre

 import { useRef, createRef } from 'react'; import WirisWrapper from './WirisWrapper'; const Parser = ({ itemsArray }) => { let refs = useRef([]); refs.current = itemsArray.map((ref, index) => (refs.current[index] = createRef())); return ( <div> {itemsArray.map((item, index) => item.type === 'math' ? ( <WirisWrapper ref={el => (refs.current[index] = el)} key={index} mString={item.html} /> ) : ( <div key={index} dangerouslySetInnerHTML={{ __html: item.html}}> </div> ) )} </div> ); }; export default Parser;

WirisWrapper de niño

 import { forwardRef, useEffect } from 'react'; const WirisWrapper = forwardRef((props, ref) => { const { mString } = props; useEffect(() => { if (ref.current && com.wiris.js.JsPluginViewer) { ref.current.innerHTML = mString; com.wiris.js.JsPluginViewer.parseElement(ref, true, function () {}); } }, [ref, com.wiris.js.JsPluginViewer]); return <div ref={ref}></div>; }); export default WirisWrapper;