在 React 中渲染格式化（未缩小）HTML（SSR with Next.js）

Question

如何在 React 中渲染格式化（未缩小）HTML（SSR with Next.js）？

预期输出：

<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 custom server and routing and walkthrough this 漂亮打印的答案 html。使用 nextjs 或 react SSR，这可能无法作为内置的可配置选项。

在 React 中渲染格式化（未缩小）HTML（SSR with Next.js）

Render formatted (unminified) HTML in React (SSR with Next.js)

html-rendering

reactjs

server-side-rendering

react-redux

nextjs