Der Versuch, etwas zu tun, würde ich für sehr einfach halten. Ich möchte eine vorhandene JavaScript-Bibliothek importieren und dann deren Funktionen aufrufen. So möchte ich zum Beispiel blah.js importieren und dann blah () aufrufen.
import React from 'react';
import {blah} from 'blah/js/blah.js';
class MyClass extends React.Component {
constructor() {
super();
}
componentDidMount() {
window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
handleResize() {
blah.blah();
}
render() {
....
}
}
export default MyClass;
Ich frage mich nur, welche magische Kombination von Dingen ich tun muss, damit dies funktioniert. Vielleicht verpasse ich nur den Punkt. Das Beispiel gibt den Fehler "TypeError: _blah.blah ist undefiniert".
reactjs
ecmascript-6
webpack
user1686620
quelle
quelle
blah.js
.blah.js
wenn Sie den Export desblah
Objekts benannt haben. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…Antworten:
Benannte Exporte:
Angenommen, Sie erstellen eine Datei mit dem Namen "
utils.js
Dienstprogrammfunktionen", die Sie für andere Module (z. B. eine React-Komponente) verfügbar machen möchten. Dann würden Sie jede Funktion zu einem benannten Export machen :export function add(x, y) { return x + y } export function mutiply(x, y) { return x * y }
Angenommen, utils.js befindet sich im selben Verzeichnis wie Ihre React-Komponente, können Sie die Exporte wie folgt verwenden:
import { add, multiply } from './utils.js'; ... add(2, 3) // Can be called wherever in your component, and would return 5.
Wenn Sie möchten, platzieren Sie den gesamten Inhalt des Moduls unter einem gemeinsamen Namespace:
import * as utils from './utils.js'; ... utils.multiply(2,3)
Standardexporte:
Wenn Sie andererseits ein Modul haben, das nur eines ausführt (eine React-Klasse, eine normale Funktion, eine Konstante oder etwas anderes) und dieses Ding anderen zur Verfügung stellen möchten, können Sie einen Standardexport verwenden . Angenommen, wir haben eine Datei
log.js
mit nur einer Funktion, die das Argument abmeldet, mit dem sie aufgerufen wird:export default function log(message) { console.log(message); }
Dies kann jetzt folgendermaßen verwendet werden:
import log from './log.js'; ... log('test') // Would print 'test' in the console.
Sie müssen es nicht aufrufen,
log
wenn Sie es importieren, Sie können es tatsächlich so aufrufen, wie Sie möchten:import logToConsole from './log.js'; ... logToConsole('test') // Would also print 'test' in the console.
Kombiniert:
Ein Modul kann sowohl einen Standardexport (max. 1) als auch benannte Exporte haben (entweder einzeln importiert oder
*
mit einem Alias verwendet). React hat tatsächlich Folgendes:import React, { Component, PropTypes } from 'react';
quelle
import * as util from './utils.js';
(Ich habe dies auch zur Antwort hinzugefügt).import * as utils from './utils.js';
Wenn Sie die oben genannten Schritte ausführen, können Sie Funktionen in utils.js as verwenden
quelle