主页 / 问题 / 1394068
Accepted
inject CR
Asked:2022-08-27 15:34:55 +0000 UTC2022-08-27 15:34:55 +0000 UTC

我如何像 api 一样显示 json 而不是布局

  • 772
import { GetServerSideProps } from "next"
import { FC } from "react"

const App: FC = (props: any) => {
 
  return (props)
}

export default App


export const getServerSideProps: GetServerSideProps = async (context) => {
  const props = await {
    test: 'Test'
  }
  return await {props}
}

是否可以输出而不是HTML jason 对象Content-Type application/json？是否可以自定义组件的渲染？

javascript

1 个回答

  1. Best Answer

    您可以以非常简单的原生方式在 html 中显示 JSON。为此，您只需将执行结果包装JSON.stringify()在一个标签中<pre>，您就会得到一个很好的结果：

    import data from "./data.json";

export default function App() {
  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

    在此处输入图像描述

    链接到反应沙箱

    升级版：

    如果原生的自写方案不适合你，又想使用现成的包，那么可以使用react-json-view库

    import ReactJson from "react-json-view";
import data from "./data.json";

export default function App() {
  return (
    <div className="App">
      <ReactJson src={data} />
    </div>
  );
}

    在此处输入图像描述

    使用 react-json-view 链接到沙箱

    • 2

相关问题