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

Posted 2023-02-22

【中文标题】如何在 React 中渲染由 createElement() 创建的元素？

【英文标题】：How to render an element in React which was created by createElement()?

【发布时间】：2021-04-18 14:44:02

【问题描述】：

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

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

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

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

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

还有其他方法吗？

【参考方案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 />)
          )
          
      </>
      )

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