有没有办法将纯 HTML 元素插入到 React 组件中？

Question

我想使用 PixiJS 和 Next.js 创建一个适合屏幕的最佳缩放比例舞台。我知道

@pixi/react

，但我想创建一个游戏，考虑到可能有数百个实体，每次同源实体产生、不产生、重新定位和旋转时重新渲染舞台效率很低。

我尝试过运行这个：

function createElement() {
  const element = document.createElement('span');
  element.innerText = 'span';
  return element;
}

export default function App() {
  return (
    <h1>Interpolated: {createElement()}</h1>
  );
}

得到：

对象作为 React 子对象无效（找到：[object HTMLSpanElement]）。

Answer 1

使用

dangerouslySetInnerHTML

export default function App() {
  return (
    <h1>
      Interpolated:
      <span dangerouslySetInnerHTML={{ __html: createElement() }} />
    </h1>
  );
}

function createElement() {
  const element = document.createElement("span");
  element.innerText = "span";
  return element.outerHTML;
}