文章/答案/技术大牛

发布

社区首页 >问答首页 >使用react从JSON文件中读取数据

问使用react从JSON文件中读取数据
EN

Stack Overflow用户

提问于 2018-10-30 10:01:16

回答 4查看 14.1K关注 0票数 4

我对使用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>

我不确定我需要添加什么来允许我的项目导入这些文件。这是我正在犯的错误：

javascript

reactjs

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-10-30 10:11:03

很简单。您可以简单地导入.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';

票数 7

Stack Overflow用户

发布于 2018-10-30 10:07:07

这是：

import PostData from "./JSONData.js";

导入模块的默认导出的导入声明。JSON数据文件不是JavaScript模块。

要读取数据文件，可以使用平台上的任何可用机制(例如，web上的fetch )。

我应该注意，如果您想将JSON数据文件变成一个JavaScript模块，那么您可能只需要对它做一个非常小的更改。例如，如果您有：

{
    "answer": 42,
    "question": "Life, the Universe, and Everything!"
}

然后在开头添加"export“，在末尾添加;，使其成为导出该对象的JavaScript模块，作为其默认导出：

export default {
    "answer": 42,
    "question": "Life, the Universe, and Everything!"
};

例如，export default /*...any valid JSON here...*/;是一个具有默认导出的有效模块。

票数 2

Stack Overflow用户

发布于 2018-10-30 12:25:10

如果使用的是类型记录，则可以声明一个模块并将其作为对象使用，如下所示

declare module "*.json" {
  const value: any;
  export default value;
}

//然后像这样使用它

import * as de_trans from './translations/de.json';

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53061724

复制

相似问题

问使用react从JSON文件中读取数据
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用react从JSON文件中读取数据EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用react从JSON文件中读取数据
EN