Рендеринг отформатированного (неунифицированного) HTML в React (SSR с Next.js)

Question

Как я могу отформатировать (unminified) HTML в React (SSR с Next.js)?

Ожидаемый результат:

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

Сейчас получаю:

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

TY!

Answer 1

Вам нужно отформатировать вывод перед тем, как вернуться к браузеру. Что касается nextjs, сначала переключитесь на пользовательский сервер nexjs и настройте маршрутизацию и пошагово ознакомьтесь с этим ответом для получения симпатичной печати html. Используя nextjs или реагировать на SSR, это может оказаться невозможным в качестве встроенного настраиваемого параметра.

Answer 2

Вы можете искать опасно setinnerhtml. Это позволяет вам передать строку, которую вы хотите визуализировать как необработанный HTML.

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

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