Импортировать файл JSON в React

Я новичок в 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'));

hobbies.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

Ответы

Ответ 1

Один приятный способ (без добавления поддельного расширения.js, предназначенного для кода, а не для данных и конфигураций) - использовать модуль json-loader. Если вы использовали приложение create-react-app для подстройки вашего проекта, модуль уже включен, вам просто нужно импортировать json:

import Profile from './components/profile';

Этот ответ объясняет больше.

Ответ 2

попробуйте export default DATA или module.exports = DATA

Ответ 3

Сохраните файл JSON с расширением.js и убедитесь, что ваш JSON должен находиться в одном каталоге.

Ответ 4

Этот старый каштан...

Короче говоря, вы должны использовать require и позволить узлу обрабатывать парсинг как часть требуемого вызова, а не передавать его стороннему модулю. Вы также должны следить за тем, чтобы ваши конфиги были пуленепробиваемыми, что означает, что вы должны тщательно проверить возвращаемые данные.

Но для краткости рассмотрим следующий пример:

Например, скажем, у меня есть файл конфигурации "admins.json" в корне моего приложения, содержащий следующее:

[{
  // Note the quoted keys, "userName", "passSalted"!
  "userName":"tech1337",
  "passSalted":"xxxxxxxxxxxx"
}]

Я могу сделать следующее и легко получить данные из файла.

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

Теперь данные находятся и могут использоваться как обычный (или массив) объект.

Ответ 5

С установленным json-loader вы можете использовать

import customData from '../customData.json';

или, что еще проще

import customData from '../customData';

Для установки json-loader

npm install --save-dev json-loader

Ответ 6

//переименовать файл.json в.js и сохранить в папке src

Объявите объект json как переменную

var customData = { "key":"value" };

Экспортируйте его с помощью module.exports

module.exports = customData;

Из компонента, который нуждается в этом, убедитесь, что назад две папки глубоко

import customData from '../customData';