时间戳

首页 > 解决方案 > 用自定义反应组件替换 html 中的元素

javascript - 用自定义反应组件替换 html 中的元素

问题描述

我想知道用<CustomImage>组件替换 html 中的所有元素的最佳方法是什么

在渲染函数中调用函数 writeText

writeText(innerHTML) {
        // Take raw innerHTML string from props and turn it into actual innerHTML with a placeholder
        let tmp = document.implementation.createHTMLDocument();
        tmp.body.innerHTML = innerHTML;
        const media_sources_to_replace = ['img'];
        media_sources_to_replace.forEach(tag => {
            let ElArr = tmp.getElementsByTagName(tag);
            if (ElArr.length !== 0) {
                    this.replaceImages(ElArr);
            }
        });
return tmp.body.innerHTML;
}

尝试如下 replaceImages 似乎不起作用：

replaceImages(elArr) {
        const tmp = elArr
        for (let i=0;i < tmp.length; i++) {
            elArr[i] = <CustomImage alt={tmp[i].alt} imgSrc={tmp[i].src}/>
        }
    }

我的理解是您无法编辑HTMLCollection，但我不确定处理此问题的最佳方法是什么。

标签： javascriptreactjs

解决方案

您可以编辑 HTMLCollections，这不是问题。问题是 JSX 代码不是任何 HTML 元素。为此，您将使用以下命令：

ReactDOM.render(<CustomImage alt={tmp[i].alt} imgSrc={tmp[i].src} />, elArr[i]);

如果这不起作用，请在其前面添加此行：

elArr[i].innerHTML = '';

推荐阅读