JSON dosyasını React'te içe aktarın

React'te yeniyim ve bir JSON DATAdeğişkenini harici bir dosyadan içe aktarmaya çalışıyorum . Aşağıdaki hatayı alıyorum:

"./CustomData.json" modülü bulunamıyor

Biri bana yardım edebilir mi? DATADeğişkenimde varsa çalışır , index.jsancak harici bir JSON dosyasındayken değil.

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

Güzel bir yol (sahte bir .js uzantısı eklemeden, veri ve yapılandırmalar için değil kod için) json-loadermodülü kullanmaktır . create-react-appProjenizi iskele için kullandıysanız , modül zaten dahil edilmiştir, sadece json'unuzu içe aktarmanız gerekir:

import Profile from './components/profile';

Bu cevap daha fazlasını açıklıyor.

Bu eski kestane ...

Kısacası, bir 3. taraf modülüne dış kaynak kullanmak yerine, gerekli çağrının bir parçası olarak ayrıştırmayı gereksinim ve bırakma düğümünü kullanmalısınız. Ayrıca yapılandırmalarınızın kurşun geçirmez olmasına dikkat etmelisiniz, bu da iade edilen verileri dikkatlice kontrol etmeniz gerektiği anlamına gelir.

Ancak kısaca şu örneği ele alalım:

Örneğin, uygulamamın kökünde aşağıdakileri içeren bir 'admins.json' yapılandırma dosyam olduğunu varsayalım:

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

, Alıntılanan tuşları Not "userName", "passSalted"!

Aşağıdakileri yapabilir ve verileri kolaylıkla dosyadan alabilirim.

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

Artık veriler içeridedir ve normal (veya dizi) bir nesne olarak kullanılabilir.

En basit yaklaşım takip ediyor

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

export default someJson

sonra

import someJson from './someJson'

İle json-loaderyüklü, kullanabilirsiniz

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

veya daha da basitçe

import customData from '../customData';

Yüklemek json-loader

npm install --save-dev json-loader

Lütfen JSON dosyanızı .js uzantısıyla saklayın ve JSON'nizin aynı dizinde olması gerektiğinden emin olun.

Benim için çalışan çözüm şuydu: - data.json dosyamı src'den genel dizine taşıdım. Ardından dosyayı getirmek için getirme API'sini kullandı

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

Sorun, react uygulamasını derledikten sonra, getirme isteğinin , aslında react uygulamamın genel dizini olan " http: // localhost: 3000 / data.json " URL'sindeki dosyayı aramasıydı . Ancak ne yazık ki react app data.json dosyası derlenirken src'den public dizine taşınmaz. Bu yüzden data.json dosyasını src'den public dizine açıkça taşımamız gerekiyor.

export default DATAveya ile denemodule.exports = DATA

// .json dosyasını .js olarak yeniden adlandırın ve src klasöründe tutun

Json nesnesini bir değişken olarak bildirin

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

Module.exports kullanarak dışa aktarın

module.exports = customData;

İhtiyaç duyan bileşenden, iki klasör derinliğini geri aldığınızdan emin olun.

import customData from '../customData';

herhangi bir üçüncü taraf kodu veya kitaplığı kullanmadan bunu yapmanın birden çok yolu vardır (önerilen yol).

1. STATİK YOL: bir .json dosyası oluşturun ve ardından bunu react bileşeni örneğinize aktarın

benim dosya adım "example.json"

{"example" : "my text"}

example.json içindeki örnek anahtar, gelecekteki sorunları önlemek için çift tırnak kullanmak için akılda tutulan herhangi bir şey olabilir.

React bileşeninde nasıl içe aktarılır

import myJson from "jsonlocation";

ve bunun gibi her yerde kullanabilirsin

myJson.example

şimdi dikkate alınması gereken birkaç nokta var. Bu yöntemle, içe aktarmanızı sayfanın en üstünde bildirmek zorunda kalırsınız ve hiçbir şeyi dinamik olarak içe aktaramazsınız.

Şimdi, JSON verilerini dinamik olarak içe aktarmak istiyorsak ne olacak? Örneğin çok dilli bir destek web sitesi?

2 DİNAMİK YOL

1. JSON dosyanızı aynen yukarıdaki örneğim gibi bildirin

ancak bu sefer verileri farklı şekilde içe aktarıyoruz.

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

bu aynı şekilde erişebilir.

ama dinamik yük nerede bekle?

JSON'u dinamik olarak nasıl yükleyeceğiniz burada

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

şimdi tüm JSON dosyalarınızın aynı dizinde olduğundan emin olun

burada JSON'u ilk örnekle aynı şekilde kullanabilirsiniz

myJson.example

Ne değişti? ithalat şeklimiz çünkü gerçekten ihtiyacımız olan tek şey bu.

Umarım bu yardımcı olur.

Bu iyi çalıştı 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>

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;

Modülünüzde gerekli kılın:

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

Saygılarımızla