如何在 React 中渲染由 createElement() 创建的元素？答案

【问题标题】：How to render an element in React which was created by createElement()?如何在 React 中渲染由 createElement() 创建的元素？
【发布时间】：2021-04-18 14:44:02
【问题描述】：

我使用以下方法创建了一个图像元素：

const image = document.createElement('image'); // or new Image();

如何在 React 中渲染这个 image 变量？

我不想使用 Html 标签来做这样的事情：

<img src={image.src} ... />

还有其他方法吗？

【问题讨论】：

标签： html reactjs dom components render

【解决方案1】：

要么创建一个<div class="parent"> </div>，然后使用

document.querySelector(".parent").appendChild(imageElement)

或者简单地说，

document.appendChild(imageElement)

【讨论】：

但我不想一定要附加它。我希望能够在任何我想要的地方渲染它。
然后让它成为自己的组件@but-why
创建一个组件并在任何你想要的地方使用它。这就是 React 的全部意义所在。如果没有，则使用上述方法。

【解决方案2】：

这是错误的做法。你不应该直接使用 React 操作 DOM。相反，我会在您的状态中拥有一组对象，并在您的组件中将对象映射到您选择的元素。像这样

const Component = () => {
    const [components, setComponents] = useState([{src:'path/to/src', alt:'altTag'}])
    return(
      <>
          {
          components.map(e => {
              return(<img src={require(e.src)} alt={e.alt} />)
          })
          }
      </>
      )
}

这是凭记忆写的/未经测试，所以可能有问题，所以不要杀了我。但是如果你需要在任何地方渲染它，让它成为它自己的组件。如果它真的只是一个图像，那么你不需要数组/映射只需使用一个对象并以相同的方式渲染它

【讨论】：