在 React 中导入 JSON 文件

Question

我是 React 新手，我正在尝试从外部文件导入 JSON DATA 变量。我收到以下错误：

找不到模块“./customData.json”

有人可以帮我吗？如果我在 DATA 中有我的 index.js 变量，但它在外部 JSON 文件中时无效。

index.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import customData from './customData.json';
import Profile from './components/profile';
import Hobbies from './components/hobbies';

class App extends Component {
  render() {
    return (
      <div>
        <Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} />
        <Hobbies hobbyList={this.props.profileData.hobbyList}/>
      </div>
    );
  }
}

ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.container'));

爱好.js

import React, {Component} from 'react';

var Hobbies = React.createClass({
  render: function(){
    var hobbies = this.props.hobbyList.map(function(hobby, index){
        return (<li key={index}>{hobby}</li>);
    });
    return (
        <div>
            <h5>My hobbies:</h5>
            <ul>
                {hobbies}
            </ul>
        </div>
    );
  }
});

export default Hobbies;

profile.js

import React from 'react';

var Profile = React.createClass({
render: function(){
    return (
        <div>
            <h3>{this.props.name}</h3>
            <img src={this.props.imgUrl} />
        </div>
    )
  }
});

export default Profile

customData.json

var DATA = {
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
}

export default DATA

原文由 Hugo Seleiro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一种不错的方法（不添加用于代码而非数据和配置的虚假 .js 扩展名）是使用 json-loader 模块。如果你已经使用 create-react-app 来搭建你的项目，模块已经包含，你只需要导入你的 json：

 import Profile from './components/profile';

这个 答案解释了更多。

原文由 Javad 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这个老栗子…

简而言之，您应该使用 require 并让节点将解析作为 require 调用的一部分来处理，而不是将其外包给第三方模块。您还应该注意您的配置是防弹的，这意味着您应该仔细检查返回的数据。

但为了简洁起见，请考虑以下示例：

例如，假设我的应用程序根目录中有一个配置文件“admins.json”，其中包含以下内容：

管理员.json

 [{
  "userName": "tech1337",
  "passSalted": "xxxxxxxxxxxx"
}]

注意引用的键， "userName" ， "passSalted" ！

我可以执行以下操作并轻松地从文件中获取数据。

 let admins = require('~/app/admins.json');
console.log(admins[0].userName);

现在数据已经存在并且可以用作常规（或数组）对象。

原文由 Tech1337 发布，翻译遵循 CC BY-SA 4.0 许可协议