Reactに外部メソッドを導入する方法

react で外部メソッドを導入する方法: 1. import を通じて外部メソッドを導入します; 2. React のライフサイクルを通じて外部メソッドを導入します (「componentDidMount(){let scriptSrc = ['/config/」などのコード) jquery" .min.js', '/config/lib/codemirror.js']scriptSrc.map(res => {...}".

## このチュートリアルの動作環境: Windows 10 システム、react バージョン 18.0.0、Dell G3 コンピューター

react に外部メソッドを導入する方法は?

#react での外部関数 js の導入を記録する 質問

react プロジェクトで作業するとき、他のネイティブ js モジュール (つまりメソッド) を参照する必要がある場合があります。

If js はエクスポート デフォルトの es6 を通じてエクスポートされ、jsx ではインポートを通じて導入できます。

ただし、js が単なるメソッドであり、es6 などを通じてエクスポートされない場合は、スクリプトを通じて導入する必要があります。 ;

たとえば、ネイティブ js または js で書いた jquery を使ってノードの戻り値を操作するということは、ページ要素がクリックされたときにネイティブ イベントがトリガーされることを意味しており、jsx のインポートでは導入できません。

この js を導入するには 2 つの方法があります

1. React Framework の HTML に

を導入する場合 2. # を導入することもできます

   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);
    }

など、react のライフ サイクルを通じて jsx に記述します。 複数の js を導入する必要がある場合は、いくつかの script タグを動的に作成する必要があります。そうしないと、後者が前者を上書きします。

先頭にjsを追加する場合は、

すべてのjsコードがダウンロードされるまで待つ必要があるため、解析と実行が完了すると、ページのコンテンツが表示され始めます。 #導入時に落とし穴があります

スクリプトが HTML に js を導入する場合、その js アドレスは

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

です。つまり、ブラウザが探している js アドレスはファイルはプロジェクトのパブリックにあるファイル、つまり静的リソースの下にあるファイルなので、js をパブリック (静的リソース ディレクトリの下) に置き、それをパスに直接インポートする必要があります。学習: 「

React ビデオ チュートリアル

」

以上がReactに外部メソッドを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。