React 将字符串解析为 html 并使用 forwardRef 将函数应用于 DOM

Posted 2023-02-19

【中文标题】React 将字符串解析为 html 并使用 forwardRef 将函数应用于 DOM

【英文标题】：React Parsing string as html and applying a function to DOM with forwardRef

【发布时间】：2021-12-01 10:00:48

【问题描述】：

在一个 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;

【参考方案1】：

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

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

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>
  )
)

【讨论】：

感谢回复。在按照您的建议进行更改后，在 WirisWrapper 中，“ref”开始以当前对象的形式出现：null。而且我无法将 func 应用于 dom 元素。有什么想法吗？

@Er.Se 哦，您只需要访问WirisWrapper 中附加到div (<div ref=ref></div>) 的引用吗？你可能只是在本地创建 React ref。认为您可以为您的代码创建一个运行代码和框，供我们实时检查和调试？