在我的屏幕中显示动态填充对象的每个键和值 - React

Posted 2023-02-16

【中文标题】在我的屏幕中显示动态填充对象的每个键和值 - React

【英文标题】：Show every key and values of an dynamically filled object in my screen - React

【发布时间】：2021-11-27 13:15:10

【问题描述】：

我想显示传入对象的每个键和值，该对象是动态填充的，所以如果对象中有一个对象，我也需要显示该对象的键和值。

这是一个例子

info:
address:
   city: __old: 'city1', __new: 'city2'
   country: __old: 'country1', __new: 'country2'
   lineOne: __old: 'lineOne1', __new: 'lineOne2'
,
personalId: __old: '55555555', __new: '555555556'

【参考方案1】：

你可以像这样使用JSON.stringify：

// import React from "react";

const address = 
  city:  __old: "city1", __new: "city2" ,
  country:  __old: "country1", __new: "country2" ,
  lineOne:  __old: "lineOne1", __new: "lineOne2" ,
;

const App = () => 
  return <pre>JSON.stringify(address, null, 3)</pre>;
;

// export default App;

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

你也可以使用一些库，比如JSONTree:

import React from "react";
import JSONTree from "react-json-tree";

const address = 
  city:  __old: "city1", __new: "city2" ,
  country:  __old: "country1", __new: "country2" ,
  lineOne:  __old: "lineOne1", __new: "lineOne2" ,
;

const App = () => 
  return <JSONTree data=address />;
;

export default App;

【讨论】：

为了保持换行和缩进，我建议输出到 <pre> 而不是 <div>

酷，用