1

在 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;
4

1 回答 1

0

refs.current = itemsArray.map((ref, index) => (refs.current[index] = createRef()));看起来是在每个渲染周期创建一个新的 React ref并同时改变现有的数组。

如果 React refs 以前不存在，您只想创建它们。每次渲染时将数组映射itemsArray到一个新数组，返回现有的 refs 或创建新的 refs。

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

然后在映射 UI 时只需按索引访问 ref。

{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>
  )
)}
于 2021-10-12T20:48:39.050 回答