使用反应从 JSON 文件中读取数据
Jam*_*rry 3 javascript reactjs
我对使用 React 真的很陌生，我使用 IntelliJ 作为我的 IDE。
我试图在我的网站上显示 JSON 数据文件的内容，但我收到错误消息，说我创建了非法导入减速。
import PostData from "./JSONData.js";
我在类中加载信息的类如下
class Invoice extends React.Component
{
render()
{
return (
<div className ="container">
<h2>Allstate NI Graduate Application</h2>
<h2>Invoice</h2>
{PostData.map((postDetail, index)=>{
return <h1>{postDetail.code}</h1>
})}
</div>
);
}
}
这是我的主要 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gerry Byrne and David Wilson - ReactJS Tutorials</title>
<img src="../Drawable/carImage.png" id="carImg">
<!--Bootstap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<!-- Tells the file to get the react.js file from a CDN.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.js"></script>
<!--Tells the file to get the react-dom.js file from a CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.js"></script>
<!--The above two scripts used to be one but have since been seperated / ReactDom is only used to render ReactDOM.render()-->
<!---->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<!--Tells the file to get the compiler file from a CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<!---->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.5.2/ReactRouter.min.js"></script>
<link rel="stylesheet" href="../css/style.css" />
<!-- Latest compiled and minified CSS Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></link>
</head>
<body>
<div id="contentgoeshere"></div>
<br/>
<script type="text/jsx" src = "../JavaScript/ReactJSV3.js"></script>
</body>
</html>
我不确定我需要添加什么才能让我的项目导入这些文件。这是我得到的错误：
它非常简单。您可以简单地导入.json文件
import myJson from '../assets/my_json.json';
并myJson直接使用
my_json.json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
}
}
]
}
或者
您可以导出对象（如果要使用 .js 文件）并导入另一个模块。
const myJson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
}
}
]
}
export default myJson;
导入语句
import myJson from '../assets/my_json.js';
| 归档时间： |
|
| 查看次数： |
11876 次 |
| 最近记录： |