Question

我正在建立一个博客。我从API获取博客内容html。在我的项目中，我有一个图像组件，它处理图像的加载要比默认的html img标签好一些，这就是为什么我要替换它。

我尝试过：

function replaceImages(html) {
  let tmp = document.createElement('div');
  tmp.innerHTML = html;

  let images = tmp.querySelectorAll('img');

  images.forEach((image, index) => {
    image.parentNode.replaceChild(<Image src={image.src} alt={image.alt}></Image>, image)
  })

  return tmp.innerHTML
}

但我收到此错误：

TypeError：无法在“节点”上执行“ replaceChild”：参数1为不是“节点”类型。

Answer 1

您不能将您的React元素实例直接传递到DOM中。这就是为什么您会遇到错误。 <Image>的类型不是Node（就像在本机DOM Node中一样）。

您将需要使用React渲染的 some 形式来获取实际的DOM Node：

  images.forEach(image => {
    const host = document.createElement("div");
    ReactDOM.render(<Image src={image.src} alt={image.alt} />, host);
    image.parentNode.replaceChild(host.children[0], image)
  })

如何在React / javascript中用自定义图像组件替换<img>

1 个答案: