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

Я новичок в React и пытаюсь импортировать DATAпеременную JSON из внешнего файла. Я получаю следующую ошибку:

Не удается найти модуль "./customData.json"

Кто-нибудь может мне помочь? Он работает, если у меня есть DATAпеременная, index.jsно не во внешнем файле JSON.

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'));

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;

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

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

export default DATA

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

import Profile from './components/profile';

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

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

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

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

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

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

Обратите внимание на процитированные ключи, "userName", "passSalted"!

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

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

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

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

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

или еще проще

import customData from '../customData';

Установить json-loader

npm install --save-dev json-loader

Самый простой подход следующий

// Save this as someJson.js
const someJson = {
  name: 'Name',
  age: 20
}

export default someJson

тогда

import someJson from './someJson'

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

Для меня сработало следующее решение: - Я переместил свой файл data.json из src в общедоступный каталог. Затем использовал API-интерфейс fetch для получения файла

fetch('./data.json').then(response => {
      console.log(response);
      return response.json();
    }).then(data => {
      // Work with JSON data here
      console.log(data);
    }).catch(err => {
      // Do something for an error here
      console.log("Error Reading data " + err);
    });

Проблема заключалась в том, что после компиляции приложения для реагирования запрос на выборку ищет файл по URL-адресу « http: // localhost: 3000 / data.json », который на самом деле является общедоступным каталогом моего приложения для реагирования. Но, к сожалению, при компиляции приложения response файл data.json не перемещается из src в общедоступный каталог. Поэтому нам нужно явно переместить файл data.json из src в публичный каталог.

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

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

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

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

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

module.exports = customData;

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

import customData from '../customData';

Это хорошо сработало в React 16.11.0

// in customData.js
export const customData = {
  //json data here
  name: 'John Smith',
  imgURL: 'http://lorempixel.com/100/100/',
  hobbyList: ['coding', 'writing', 'skiing']
}

// in index.js
import { customData } from './customData';

// example usage later in index.js
<p>{customData.name}</p>

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

1-й СТАТИЧЕСКИЙ СПОСОБ: создайте файл .json, затем импортируйте его в свой пример реагирующего компонента.

мое имя файла - example.json

{"example" : "my text"}

ключ example внутри example.json может быть любым, только помните, что используйте двойные кавычки, чтобы предотвратить проблемы в будущем.

Как импортировать в компонент React

import myJson from "jsonlocation";

и вы можете использовать его где угодно

myJson.example

Теперь нужно учесть несколько вещей. С помощью этого метода вы вынуждены объявить свой импорт вверху страницы и не можете ничего динамически импортировать.

А что насчет того, чтобы динамически импортировать данные JSON? например многоязычный сайт поддержки?

2 ДИНАМИЧЕСКИЙ СПОСОБ

1. объявите свой файл JSON точно так же, как в моем примере выше

но на этот раз мы импортируем данные иначе.

let language = require('./en.json');

это можно получить таким же образом.

но подождите, а где же динамическая нагрузка?

вот как динамически загружать JSON

let language = require(`./${variable}.json`);

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

здесь вы можете использовать JSON так же, как в первом примере

myJson.example

что изменилось? способ импорта, потому что это единственное, что нам действительно нужно.

Надеюсь, это поможет.

var langs={
  ar_AR:require('./locale/ar_AR.json'),
  cs_CZ:require('./locale/cs_CZ.json'),
  de_DE:require('./locale/de_DE.json'),
  el_GR:require('./locale/el_GR.json'),
  en_GB:require('./locale/en_GB.json'),
  es_ES:require('./locale/es_ES.json'),
  fr_FR:require('./locale/fr_FR.json'),
  hu_HU:require('./locale/hu_HU.json')
}
module.exports=langs;

Требовать это в своем модуле:

let langs=require('./languages');

С уважением