在 React 中优雅展示 JSON 数据：像 b-code-editor 一样

在 React 开发中，经常需要将 JSON 数据以清晰易读的方式展示给用户。react-json-view 库提供了一个强大的组件，可以轻松实现类似 b-code-editor 的代码高亮和格式化效果，提升用户体验。

安装 react-json-view

首先，使用 npm 或 yarn 安装 react-json-view 库：bashnpm install react-json-view

使用 ReactJson 组件展示 JSON

安装完成后，即可在 React 组件中引入并使用 ReactJson 组件：jsximport React from 'react';import ReactJson from 'react-json-view';

const JsonDisplay = ({ jsonData }) => { return ( );};

export default JsonDisplay;

在上面的代码中：

• JsonDisplay 组件接收一个名为 jsonData 的 prop，用于传递 JSON 数据。- ReactJson 组件负责渲染 JSON 数据，并提供多种定制选项，例如主题、缩进、是否显示数据类型和对象大小等。

在父组件中使用 JsonDisplayjsximport React from 'react';import JsonDisplay from './JsonDisplay';

const App = () => { const jsonData = { name: 'John Doe', age: 30, email: 'john.doe@example.com' };

return (

export default App;

在这个例子中，我们在 App 组件中创建了一个 jsonData 对象，并将其传递给 JsonDisplay 组件进行展示。

总结

通过 react-json-view，您可以轻松地在 React 应用中实现美观且易于理解的 JSON 数据展示效果，提升用户体验。