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

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: Failed to execute 'replaceChild' on 'Node': parameter 1 is not of type 'Node'.

Answer 1

您不能将 React 元素实例直接传递到 DOM 中。这就是你收到错误的原因。 <Image>不是 Node 类型(与原生 DOM Node 一样)。

您需要使用某种 形式的 React 渲染来获得实际的 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)
  })