Discussion :

[MariaDevis]

Bonsoir !

J'ai commencé il y a quelques jours à m’intéresser à React et pour le moment les résultats sont pas mauvais, mon but étant de créer une carte leaflet et d'y afficher des données GeoJSON qui sont nombreux sur mon serveur mais j'en utilise 2 pour le moment pour mes tests.

Malheureusement je n'arrive pas à faire charger ces fichiers autrement qu'avec require('./fichier.json'), j'ai tenté avec le module node-fetch mais je me retrouve avec une erreur CORS. J'ai donc pensé à demander à l'utilisateur de rentrer le nom de fichier qu'il souhaite voir afficher.

Mais je n'ai aucune idée de comment lui demander ça avant que la variable ne soit créee..

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
import React from 'react'
import ReactDOM from 'react-dom';
import L from 'leaflet'; 
import 'leaflet/dist/leaflet.css';
import { Map, withLeaflet, TileLayer, Marker, Popup, GeoJSON } from 'react-leaflet';
import VectorGridDefault from 'react-leaflet-vectorgrid';
const VectorGrid = withLeaflet(VectorGridDefault);
 
 
var geojson = require('./DCJXCC.json')
 
 
class SimpleExample extends React.Component {
           //gestion du GeoJSON, render() de la map
}
 
ReactDOM.render(<SimpleExample />, document.getElementById('mapContainer'));

Je ne cherche rien de fou, simplement du fonctionnel donc réussir à faire apparaître une simple fenêtre pour demander un nom de fichier cible me suffirait amplement!

Mon but:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var geojson = require('./{nomfichier}.json')

Auriez-vous des idées pour entrer ce paramètre dans l'application ?

[gwyohm]

Salut,

Tu ne peux pas avoir un require dynamique (en tout cas pas pour ce que tu veux faire).

require va ajouter une dépendance d'un fichier dans ton projet react. Avoir un require dynamique à ce niveau signifierait que le client puisse lire le fichier sur son disque.

Ta première option de passer par un fetch était surement la bonne. Si tu as des problèmes de CORS, 2 solutions :

1. Coté serveur, tu autorises le CORS
2. Ton pb est surtout en dev, tu as ton serveur piloté par webpack , et tu fais une requete sur un autre serveur (qui contient tes json). Si au final, ton appli sera servie par le serveur qui contient tes json, tu n'auras pas ce souci de cors. Tu peux donc modifier ta config webpack pour qu'il agisse en proxy vers ton serveur final