Question

我正在尝试在div标签内显示JSON对象。我需要格式化并缩进。什么是最简单的方法？

Answer 1

您可以使用此代码：

在此处查看演示： https://jsbin.com/homilox/11/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
</head>
<body>
<script type="text/babel">
    var data = { "speakers": [
        { "firstname": "Ray",
            "lastname": "Villalobos",
            "category": "Front End",
            "title": "Bootstrap & CSS Preprocessors",
            "image": "http://barcampdeland.org/images/speaker_rayvillalobos.jpg",
            "link": "http://iviewsource.com",
            "bio": "Ray Villalobos is a full-time author and teacher at lynda.com. He is author of the book, Exploring Multimedia for Designers. He has more than 20 years experience in developing and programming multimedia projects. Previously at Entravision Communications, he designed and developed a network of radio station and TV web sites. As a senior producer for Tribune Interactive, he was responsible for designing orlandosentinel.com and for creating immersive multimedia projects and Flash games for the site.",
            "description": "As responsive design continues to take over the web, front-end developers and designers have turned to preprocessors and layout systems that simplify their workflow. Lynda.com staff author Ray Villalobos will talk about using the Bootstrap framework from Twitter to scaffold and fast track your responsive design. He'll talk about how you can use CodeKit and LESS to put together designs in hours instead of days."
        }
    ]};
    var Hello = React.createClass({
        render: function() {
            return <div><pre>{JSON.stringify(data, null, 2) }</pre></div>;
        }
    });

    ReactDOM.render(<Hello />, document.getElementById('container'));
  </script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

</body>
</html>

Answer 2

您可能必须根据JSON的每个属性创建html并相应地创建样式。但是，您可以使用第三方组件为您执行此操作。检查一下：

https://github.com/chenckang/react-json-pretty

显示Json in react JS div格式正确

2 个答案: