So führen Sie externe Methoden in React ein

So führen Sie externe Methoden in React ein: 1. Führen Sie externe Methoden durch Import ein 2. Führen Sie externe Methoden über den Lebenszyklus in React ein, Code wie „componentDidMount(){let scriptSrc = ['/config/jquery.min. js" ', '/config/lib/codemirror.js']scriptSrc.map(res => {...}".

Die Betriebsumgebung dieses Tutorials: Windows 10-System, React-Version 18.0 .0, Dell G3-Computer.

Wie führt man externe Methoden in React ein?

Zeichnen Sie das Problem der Einführung externer Funktions-JS in React auf. Bei der Arbeit an React-Projekten müssen Sie manchmal auf andere native JS-Module verweisen (das heißt, Methoden)

Wenn das js Es wird über den Exportstandard von es6 exportiert und kann durch Import in jsx eingeführt werden;

Aber wenn das js nur eine Methode ist und nicht über es6 usw. exportiert wird, ist es muss über ein Skript eingeführt werden;

Zum Beispiel habe ich ein natives JS geschrieben oder in einem JS wird JQuery verwendet, um den Knotenrückgabewert zu bedienen, das heißt, wenn auf ein Seitenelement geklickt wird, wird ein natives Ereignis ausgelöst, das nicht möglich ist Es gibt zwei Möglichkeiten, dieses js einzuführen: 1. Wenn es sich in Ihrem React-Framework befindet

2. Es kann auch über den Lebenszyklus von React in jsx eingeführt werden

   componentDidMount() {
        // 要引入的js文件地址
        let scriptSrc = ['/config/jquery.min.js', '/config/lib/codemirror.js']
        scriptSrc.map(res => {
            // 动态创建script标签
            var script = document.createElement('script');
            // 规则
            script.type = "text/javascript"
            // script中src只想路径
            script.src = res;
            // 追加到html的head头中
            document.head.appendChild(script);
        })
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = '/config/show-hint.js'
        // 追加到html中body的内
        document.body.append(script)
        var script = document.createElement('script');
        script.type = "text/javascript"
        script.src = '/config/formula.js';
        // 追加到html中body的内
        document.body.append(script);
    }

muss mehrere js einführen, es müssen mehrere Skript-Tags dynamisch erstellt werden, andernfalls ersetzt letzteres das vorherige Cover.

Der Grund für das Hinzufügen von js zum Kopf liegt darin, dass

warten muss, bis der gesamte js-Code heruntergeladen und analysiert wurde und ausgeführt, bevor der Seiteninhalt angezeigt werden kann

Bei der Einführung gibt es eine Gefahr

Wenn das Skript js in den HTML-Code einführt, wird es ausgeführt. Die js-Adresse lautet

http://http://localhost:端口号/你的js名称

, was bedeutet, dass die js-Adresse der Browser ist Gesucht wird nach einer Datei in der Öffentlichkeit in Ihrem Projekt, d Empfohlenes Lernen: „

React-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo führen Sie externe Methoden in React ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!