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

Posted 2023-02-22

【中文标题】在 React 中渲染格式化（未缩小的）HTML（带有 Next.js 的 s-s-r）

【英文标题】：Render formatted (unminified) HTML in React (s-s-r with Next.js)

【发布时间】：2017-12-10 21:39:01

【问题描述】：

如何在 React（带有 Next.js 的 s-s-r）中呈现格式化（未缩小）的 html？

预期输出：

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

正在接收：

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

TY！

【参考方案1】：

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

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


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

【讨论】：

抱歉，这不是我的问题。我的意思是整个页面都被缩小了（在 1 行中）。

【参考方案2】：

您需要在实际返回浏览器之前格式化输出。所以对于nextjs，首先切换到自定义服务器nexjs custom server and routing 和演练this 回答漂亮的打印html。使用 nextjs 或 react s-s-r，这可能无法作为内置的可配置选项。

【讨论】：

谢谢！这正是我所需要的！

@NikolaKnežević 很高兴它有帮助！