如何从具有tsx格式的react应用程序中的json文件中读取数据

问题描述

我想从我制作的json文件中加载数据。 我在网上看到了一些教程，但它们都有js和html。我的应用程序具有tsx格式，因此反应还很新。我找到了此链接，但无法弄清楚： https://www.pluralsight.com/guides/load-and-render-json-data-into-react-components。 该文件是这样的：

[
    {
        "id": "1","Title": "Title 1","Body": "Lorem Ipsum Text 1"
    },{
        "id": "2","Title": "Title 2","Body": "Lorem Ipsum Text 2"
    },{
        "id": "3","Title": "Title 3","Body": "Lorem Ipsum Text 3"
    }
]

我的博客tsx是这样的：

import React from "react";

const _Blog = (props: any) => {
  return (
    <>
      <article className="blog-post-item">
        <h2>TITLE</h2>
        <p>BODY</p>
        <small>ID</small>
      </article>

      <article className="blog-post-item">
        <h2>TITLE</h2>
        <p>BODY</p>
        <small>ID</small>
      </article>
      
      <article className="blog-post-item">
        <h2>TITLE</h2>
        <p>BODY</p>
        <small>ID</small>
      </article>
      
    </>
  );
};

export const Blog = _Blog;

我在网络上阅读了一些教程，但找不到tsx格式 这是我的app.tsx：

import React from "react";

import { HashRouter,NavLink,Route } from "react-router-dom";

import { Home,About,Contact,Courses,Blog } from "./pages";

import { LayoutProvider } from "./layout";

interface AppProps {}

const App: React.FC<AppProps> = (props) => {
  return (
    <HashRouter>
      <LayoutProvider>
        <div className="content">
          <Route exact path="/" component={Home} />
          <Route path="/About" component={About} />
          <Route path="/Contact" component={Contact}/>
          <Route path="/Courses" component={Courses}/>
          <Route path="/Blog" component={Blog}/>
        </div>
      </LayoutProvider>
    </HashRouter>
  );
};

export default App;

解决方法

如果您使用的是webpack之类的变压器，则可以

import menu from './json/menu.json';
console.log(menu);

webpack会为您将json数据分配给变量menu

如果没有，那么您需要自己获取它

fetch('./json/menu.json')
    .then(res => res.json())
    .then((menu) => {
        console.log(menu);
    })