React hooks中如何引入原生JS库

Rlm*

已于 2023-06-08 15:05:55 修改

阅读量656

点赞数

分类专栏： React 文章标签： javascript react.js 前端

于 2023-03-09 17:03:50 首次发布

本文链接：https://blog.csdn.net/renlimin1/article/details/129426668

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这两段代码展示了如何在React组件中利用`useEffect`和`useState`钩子函数来异步加载百度地图API。通过创建并添加script标签到文档头，然后监听加载完成的事件，确保地图API成功加载后执行回调函数。在第二个例子中，使用了Promise处理加载过程，当BMap对象存在或加载完成后，进行相应操作。

摘要由CSDN通过智能技术生成

//以插入百度地图为例
import React, {useEffect, useState} from "react";
export default function createElementScript() {
  const initScript = (url, callback) => {
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = url;
    document.head.appendChild(script);
    if (script.readyState) {
      //IE下
      script.onreadystatechange = function () {
        if (script.readyState == 'complete' || script.readyState == 'loaded') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {
      script.onload = function () {
        callback();
      };
    }
  };
  useEffect(() => {
       initScript(
      'https://api.map.baidu.com/api?v=3.0&ak=asdasdadsasda',
      function () {
        console.log('已经加载完成');
      },
    );
  }, [])

  return <div >
  </div>
}

import React, { useState, useEffect } from 'react';
export default function createElementScript() {
  const loadBMap = () => {
    return new Promise(function (resolve, reject) {
      if (typeof BMap !== 'undefined') {
        resolve(BMap);
        return true;
      }
      window.onBMapCallback = function () {
        resolve(BMap);
      };
      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.src =
        'https://api.map.baidu.com/api?v=3.0&ak=aaasada=onBMapCallback';
      script.onerror = reject;
      document.head.appendChild(script);
    });
  };

  useEffect(() => {
    loadBMap().then((res) => {
      console.log(res);
    });
  }, []);

  return <div >
  </div>
}