javascript - React 文字列を html として解析し、forwardRef を使用して関数を DOM に適用する

Question

ReactJs プロジェクトでは、com.wiris.js.JsPluginViewer.parseElement(ref, true, function () {});関数で解析しようとしています。

ドキュメントによると、その関数はDOM上の特定の要素に適用されます。純粋な JavaScript のサンプルでは、​​最初に dom 要素の innerHTML を設定してから関数を適用します。

そこで、React では refs を使って処理しようと考えました。（それが最善の方法かどうかはわかりません）

HTMLとしてレンダリングされる文字列を含む配列があります。すべての参照を配列として取得しuseRef([])、次を使用して各要素の参照を設定しますrefs.current[index]

タイプに応じて、文字列を直接レンダリングするdangerouslySetInnerHTMLか、ラッパー コンポーネントを使用して、その特別な関数を使用する子コンポーネントでレンダリングします。

しかし、WirisWrapper で関数を適用する前に、ref の innerHTML プロパティに到達できませんでした。私は試しref.innerHTML てみましたref.current.innerHTML

親としてのパーサー

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

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;