Solved - 如何在react jsx中显示复杂的JSON字符串? How to display complex/nested json string in React jsx?

最新推荐文章于 2023-11-02 11:42:26 发布

原创

最新推荐文章于 2023-11-02 11:42:26 发布 · 313 阅读

CC 4.0 BY-SA版权

文章标签：

本文探讨了如何在React应用中处理和显示包含换行符的复杂JSON字符串。建议在前端处理字符串，并使用JSON.parse转换字符串为JSON对象，再用JSON.stringify生成美化后的格式。通过这种方法，可以避免解析错误并展示整洁的JSON布局。

Frontend is better in my case, frontend need the raw data, by the way, in backend, we may need to import json-lib dependencies using group: 'com.hynnet', name:'json-lib', version:'2.4'or maybe compile 'net.sf.json-lib:json-lib:2.4:jdk8'in gradle to import dependencies, or build our own component with @Data annotation, etc. Frontend is easier to handle.

If we use JSON.parse directly on that each string in the String Array, it will have error “Object with keys cannot be a React child”, since after JSON.parse, each string will become Json format with keys and values.
If we use JSON.stringify on that