Question

我想知道用<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，但是我不确定什么是处理此问题的最佳方法。

Answer 1

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

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

如果这行不通，请在其前面添加以下行：

elArr[i].innerHTML = '';

用自定义的React组件替换html中的元素

1 个答案: