Question

How to render a JSON into a block section

Example:

let in = { a:100,b:200}


render(){
     return(
           <pre>
            ......code?
          </pre>
      )

}

I have tried with template literals but did not work.

Answer 1

只需将您想要显示的JSON字符串化

let in = { a:100,b:200}


render(){
  return(
     <pre>
       {JSON.stringify(in, '', 4)}
     </pre>
  );
}

希望有所帮助

Answer 2

使用 JSON.stringify 。

工作代码：

＆＃13;

let Data = {a:100, b:200};

const App = () => (
  <pre>
      {JSON.stringify(Data)}
  </pre>
)

ReactDOM.render(<App />, document.getElementById('app'));

＆＃13;

<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>

<div id='app' />

＆＃13;

Answer 3

JSON.stringify

请记住，功能将被忽略。

＆＃13;

let code = { a: 100, b: 200, c: function(){} };

const App = () => (
  <code>
    {JSON.stringify(code)}
  </code>
);

ReactDOM.render(<App />, document.getElementById('root'));

＆＃13;

<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>
	<div id="root"></div>

＆＃13;

如何格式化<pre> block

3 个答案: