4
votes

Comment charger un fichier js externe dans React?

J'ai un fichier data.js avec la structure suivante:

var DATA= {
  "groups": [{
    "id": "1",
    "name": "group 1",
    "subgroups": [{}, {}, ...]
  }, ...],
  ...
}

Est-il possible de charger ce fichier dans mon application React et de rendre la variable DATA disponible dans n'importe quel composant (je voudrai probablement lancer l'état Redux avec lui), si je ne peux pas utiliser export dans ce fichier et ne peux pas le transformer en fichier JSON normal? Fondamentalement, je ne peux pas modifier ce fichier. Comment y parvenir?

javascript reactjs

2 commentaires

puis recherchez les importations dynamiques.

vérifiez ceci une fois fullstackreact.com/articles/Declarately_loading_JS_librari‌ es /…

3 Réponses :

0
votes

Vous pouvez certainement utiliser l'exportation dans un fichier .js. export default ou module.exports devrait fonctionner. Si vous n'utilisez pas de transformateur de langage, utilisez la dernière approche.

import data from './data.json';

// do something with data.groups

Sinon, convertissez le fichier au format json et utilisez-le directement.

XXX

React app file.js:

{
  "groups": [{
    "id": "1",
    "name": "group 1",
    "subgroups": [{}, {}, ...]
  }, ...],
  ...
}

3 commentaires

Tout d'abord merci pour la réponse! Cependant, je n'ai probablement pas suffisamment expliqué le problème: je sais que je peux, c'est-à-dire que je peux utiliser export dans ce fichier ou le transformer en JSON. Le fait est que j'ai (dois) utiliser le fichier tel quel, sans le modifier.

En gros, je ne peux pas éditer ce fichier. ... Je suppose que vous avez manqué cette ligne.

donc fondamentalement, ce fichier data.js ne vous appartient pas? @Igal

0
votes

Si je comprends bien, vous avez juste un fichier avec cette structure exacte et cherchez un moyen d'y accéder dans votre application. Comme il utilise une déclaration var, vous pouvez simplement l'inclure dans votre application Web via une balise et la variable DATA sera globalement disponible dans votre code. Si vous utilisez TypeScript ou FlowType, vous devez également fournir un fichier de déclaration avec declare var DATA: Data; où Data serait votre interface personnalisée décrivant la structure de cet objet de données. Ce que je suggérerais à la place, c'est de créer un module unique qui consommera la variable, fournira une déclaration dans ce module uniquement, le transformera comme je le souhaite et l'exportera à partir de là. Juste pour vous donner une idée de ce à quoi il ressemblerait:

interface Data {
    groups: Group[];
}

interface Group {
    id: string;
    name: string;
    subgroups: {}[];  // you might provide more type information here, but to begin it would do as well
}

declare var DATA: Data;

const APP_DATA: Data = DATA;
export default APP_DATA;

0 commentaires

1
votes

Le fichier data.js est disponible pendant la construction
Le fichier a un contenu dans un format prédéfini
Vous utilisez Webpack pour regrouper votre application (facultatif)

Vous pouvez utiliser webpack raw-loader (d'autres bundlers ont probablement des alternatives) pour charger le contenu du fichier, puis analyser le contenu pour obtenir les données requises.

Exemple 👇

1 commentaires

Merci beaucoup! :)