Comment référencer json dans React

Comment référencer json dans React : 1. Importez directement et utilisez [create-react-app] pour construire le projet 2. Changez le fichier json en fichier js et attribuez les données du json d'origine à données variables.

• Cette méthode convient à toutes les marques d'ordinateurs
  

React Méthodes pour référencer json dans :

La première façon : importez directement

et vous devez utiliser le module json-loader, si vous utilisez create-react-app pour construire le projet, alors le module est déjà inclus

Il vous suffit d'utiliser import pour introduire le fichier json comme un composant, importer les données depuis '../lessonlist/courselist.json';

data est le nom que j'ai moi-même choisi, similaire au nom du composant. Il n'est pas nécessaire d'exporter les données par défaut pour exporter, mais l'écrire dans le fichier json signalera également une erreur

.

Deuxième type : Changez le fichier json en fichier js

Changez le fichier json en fichier js, puis attribuez les données du json d'origine à la variable data,

puis utilisez import pour l'introduire, import data from '../lessonlist/courselist.js';

Ces deux méthodes accèdent aux données comme suit

<span className="lesson-link-line1">{data[0].name}</span>
<span className="lesson-link-line1">{data[0].url}</span>
<span className="lesson-link-line1">{data[1].name}</span>
<span className="lesson-link-line1">{data[1].url}</span>
<span className="lesson-link-line1">{data[2].name}</span>
<span className="lesson-link-line1">{data[2].url}</span>

Le principal différence entre ces deux méthodes

• les fichiers json n'ont pas besoin d'être exportés par défaut d'exportation, et cette syntaxe n'est pas prise en charge,

• Les fichiers js doivent attribuer des données à une variable et les exporter en mode d'exportation par défaut,

• Les attributs et les valeurs du fichier json doivent utiliser des guillemets doubles, sinon un L'erreur sera signalée. Les attributs du fichier js n'ont pas besoin d'être ajoutés entre guillemets

Recommandations d'apprentissage gratuites associées :

javascript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!