web-dev-qa-db-fra.com

Comment avoir un fichier de configuration JSON externe dans React JSX

Je veux avoir un fichier de configuration externe (JSON) dans mon projet basé sur React. C'est le résultat final ou lorsque je le remets (dossier public et bundle.js), mon fichier de configuration devrait également L'utilisateur doit pouvoir modifier les configurations selon son souhait et utiliser mon application. C'est-à-dire sans recompiler mon code, il faut pouvoir l'utiliser. En d'autres termes, le fichier de configuration ne doit pas être intégré à mon application.

javascriptreactjsjsx
10
Jayathma

Comme Joseph Fehrman dit sans penser uniquement au JSON, utiliser JS a fonctionné pour moi. C'est ce que j'ai fait.

J'ai créé un fichier JS appelé configurations.js qui comprenait mes configurations requises

var configs = {
"aUrl": "https://localhost:9090/",
"bUrl": "https://localhost:9445/"};

Puis dans le index.html je l'ai ajouté.

<body>
<div id='root'></div>
<script src="configurations.js"></script>
<script src="dist/bundle.js"></script></body>

Puis dans le webpack.config.js je l'ai ajouté à externals comme ceci. (Notez que dans le configurations.js, le nom de la variable est configs).

externals: {
    config:  "configs", 
}

Ensuite, partout où je le veux, je peux l'importer et l'utiliser correctement. Cela a fonctionné parfaitement où j'ai pu changer les configurations après son déploiement (cela n'a pas eu à recompiler le code où mon bundle.js est resté intact :-)). Un exemple montrant comment il a été utilisé est donné ci-dessous.

import { Component } from 'react';
import axios from 'axios';
import Config from 'config';
/**
* @class GetProductAreas
* @extends {Component}
* @description Get ProductAreas
*/
class GetProductAreas extends Component {
    /**
    * @class GetProductAreas
    * @extends {Component}
    * @description get product areas
    */
    getproductAreas() {
        const url = Config.aUrl;
        return axios.get(url).then((response) => {
            return (response.data);
        }).catch((error) => {
            throw new Error(error);
        });
    }
}

export default (new GetProductAreas());
4
JEJC

La réponse acceptée peut fonctionner. Cependant, pourquoi le rendre si compliqué?

Étape 1. Créer un fichier Config.js, avec du contenu

var Configs = {
    prop1 = "abc",
    prop2 = "123"
}

Étape 2. Chargez le fichier dans index.html via une balise de script.

<div id='root'></div>
<script src="Config.js"></script>
<script src="dist/bundle.js"></script></body>

Étape 3. Accédez simplement au paramètre directement dans n'importe quel composant React.

class MyComponent extents Component {

    render() {
        //you can access it here if you want
        let myprop1 = window.Configs.prop1;

        return(){
            <div>myprop2 is: {window.Configs.prop2}</div>       
        }
    }
}

Étape 4. Profit?

N'exige pas ou n'a pas besoin d'impliquer webpack, webpack-externals, webpack-config, importer Config depuis 'config', ou tout autre BS.

Pourquoi ça marche? parce que nous avons déclaré que "Configs" était un accessoire de l'objet window et l'avons chargé globalement.

1
joedotnot

La question est un peu vague. Je pense que je sais ce que vous demandez. Tant que vous prévoyez d'utiliser Webpack ou Browserify, vous pouvez effectuer les opérations suivantes. Cela nécessite une réflexion légèrement différente au lieu d'un fichier JSON pur utilisant un fichier JS pour le masquer.

config.js:

let config = {
  option1: true,
  option2: false
}

module.exports = config;

Et puis, à partir de votre fichier en utilisant la configuration, vous pouvez faire quelque chose de similaire à ce qui suit.

app.js:

import React from 'react';
import ReactDOM from 'react-dom';
import config from './my/relative/config/path/config';
import MyOtherComponent from './components/my_component';

let component = (<MyOtherComponent config={config} />);
ReactDOM.render(component, document.querySelector('mount'));
1
Joseph Fehrman

La dernière solution a très bien fonctionné, voici quelques améliorations:

Fichier de configuration, dans le dossier/public:

config.js

var Configs = {
  var1: "value",
  var2: "value2"
}

Dans le fichier /public/index.html, ajoutez un appel de script dans l'en-tête

<head>
....
<script src="config.js"></script>
....
</head>

Enfin, appelez le var à partir du code. Fonctionne très bien!

import React from 'react'
.... 

const data = window.Configs.var1

Avec cette solution, je peux avoir plusieurs serveurs sans recompiler, et c'est facile à faire.

0
Christian Oviedo Gabarda