如何解决如何从具有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);
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。