React Parsing string as html and applying a function to DOM with forwardRef

Viewed 438

On a ReactJs project I try to parse with com.wiris.js.JsPluginViewer.parseElement(ref, true, function () {}); function.

According to the docs, that function is to be applied to specific elements on the DOM. In the samples with pure javascript, they first set innerHTML of dom element and then apply the function.

So I thought that it would be handled using refs in React. (not sure if its the best way)

I have an array which includes some string to be rendered as html. I took all refs as an array with useRef([]) and then set each element's ref using refs.current[index]

According to the type I directly render string with dangerouslySetInnerHTML or use a wrapper component to render with a child component on which I would use that special function.

But I couldn't reach innerHTML property of the ref before applying the function in the WirisWrapper. I tried ref.innerHTML and ref.current.innerHTML

Parser as Parent

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 as Child

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;
1 Answers

refs.current = itemsArray.map((ref, index) => (refs.current[index] = createRef())); looks to be creating a new React ref each render cycle and mutating the existing array at the same time.

You want to only create React refs if they don't previously exist. Map the itemsArray array to a new array each render, returning existing refs or creating new refs.

refs.current = itemsArray.map((ref, i) => refs.current[index] ?? createRef()));

Then just access the ref by index when mapping the UI.

{itemsArray.map((item, index) =>
  item.type === 'math' ? (
    <WirisWrapper
      ref={refs.current[index]}
      key={index}
      mString={item.html}
    />
  ) : (
    <div key={index} dangerouslySetInnerHTML={{ __html: item.html}}>
    </div>
  )
)}
Related