reactjs - 在 React 中渲染格式化（未缩小的）HTML（带有 Next.js 的 SSR）

Question

如何在 React（带有 Next.js 的 SSR）中呈现格式化（未缩小）的 HTML？

预期输出：

<div>
   <div>
       <input type="text" />
   </div>
</div>

现在收到：

<div><div><input type="text"/></div></div>

泰！

Answer 1

您可能正在寻找dangerouslysetinnerhtml。它允许您传入要呈现为原始 HTML 的字符串。

function createMarkup() {
  return {__html: '<div><div><input type="text"/></div></div>'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Answer 2

您需要在实际返回浏览器之前格式化输出。因此对于 nextjs，首先切换到自定义服务器nexjs 自定义服务器和路由，并通过此答案进行漂亮的打印 html。使用 nextjs 或 react SSR，这可能无法作为内置的可配置选项。