Красивое форматирование JSON — это вывод данных JSON в отформатированном, читаемом виде с правильными отступами и переносами строк, а не в одну сжатую строку.
<pre>Самый простой способ — объединить HTML-элемент <pre> с JSON.stringify(). Тег <pre> сохраняет пробелы и форматирование, что идеально работает с JSON-преобразованием.
const data = { name: 'John', age: 42 };
class User extends React.Component {
render() {
return (
<pre>
{JSON.stringify(data, null, 2)}
</pre>
);
}
}
ReactDOM.render(<User />, document.getElementById('container'));
JSON.stringify(data, null, 2): Преобразует объект JavaScript в JSON-строку с правильным форматированием. Второй параметр (null) сохраняет все свойства, а третий параметр (2) задаёт два пробела для отступа.<pre>: Гарантирует, что форматированные пробелы из JSON.stringify() отображаются в браузере как естьЭтот подход даёт чистый, читаемый вывод с правильными отступами:
{
"name": "John",
"age": 42
}
Это рекомендуемый способ отображения JSON в React-приложениях — простой и с нативной поддержкой в браузерах.
HTML тег <pre> сохраняет пробелы и переносы строк в точности так, как они отформатированы, что делает его незаменимым для отображения красиво отформатированного JSON в React.
Новый — ещё не проверен сообществом
Вы