Que faire si require ne parvient pas à réagir

Le require dans React échoue car require renvoie un module ES au lieu d'une chaîne. La solution est de l'introduire via "require('../path/to/image.jpg').default;".

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Que dois-je faire si l'exigence de réaction échoue ?

Les raisons et solutions pour les images invalides introduites par require dans le projet React

Cause

Si vous utilisez create-react-app et que vous avez besoin d'importer des images, require renvoie un module ES au lieu d'une chaîne. En effet, dans le chargeur de fichiers, l'option esModule est activée par défaut.

Solution

const image = require('../path/to/image.jpg').default;
// OR
import image from '../path/to/image.jpg';

La différence entre require et import

require est la spécification de commonjs, l'API implémentée dans node import est la syntaxe de es, qui est traitée par le compilateur. Par conséquent, l'importation peut effectuer une analyse statique des dépendances des modules et effectuer un treeshaking avec webpack, rollup, etc.

Commonjs exporte une copie de la valeur, require introduit la valeur copiée (les types de référence copient uniquement la référence) et le module es exporte la même valeur (à l'exclusion de l'exportation par défaut), qu'il s'agisse d'un type de base ou d'un type d'application.

Il existe des différences dans les méthodes d'écriture. Pour l'importation, vous pouvez utiliser import * pour introduire toutes les exportations, ou vous pouvez utiliser import aaa, {bbb} pour introduire respectivement les exportations par défaut et non par défaut, ce qui est plus flexible que nécessaire.

Apprentissage recommandé : "Tutoriel vidéo React"

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!