react 引入第三方模块(例:引入百度地图)

react 构建单页面应用程序,引入第三方模块,一般是通过npm下载引入
但是百度地图在npm 当中并没有第三方模块 所以此时我们就需要在应用的入口通过 src 的方式引用第三方模块

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥">

加载 bootstrap、 jquery 等第三方库的时候也可以用同样的方式引入

像React构建的单页面程序 ,都是模块化开发,也就是说里面的每一个对象都是一个模块,就必须通过import导入 进来,它才是一个模块

如果你不是通过import导入,就会当成一为个非法的变量 ,提示为undefined

为了避免这种情况,那么我们就需要将对象挂载在全局变量window下面
单页面程序就不会检测window这个全局变量

renderMap = (result)=>{
        this.map = new window.BMap.Map('orderDetailMap');
        // this.map.centerAndZoom('北京',11);
        // 添加地图控件
        this.addMapControl();
        // 调用路线图绘制方法
        this.drawBikeRoute(result.position_list);
        // 调用服务区绘制方法
        this.drwaServiceArea(result.area);
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以在React组件中通过`<script>`标签引入JavaScript文件,但是这种方式并不是React的推荐做法。React推荐将JavaScript代码直接写在组件中,或者使用模块化的方式引入JavaScript代码。以下是两种常见的模块化方式: 1. CommonJS模块化:使用`require`函数引入JavaScript文件。 ```javascript const myModule = require('./myModule.js'); ``` 2. ES6模块化:使用`import`语句引入JavaScript文件。 ```javascript import myModule from './myModule.js'; ``` 如果你想在React组件中引入第三方JavaScript库,可以使用`npm`包管理工具安装库,并在组件中使用`import`语句引入如,如果你想引入`lodash`库,可以按照以下步骤操作: 1. 在项目目录中运行以下命令安装`lodash`库: ``` npm install --save lodash ``` 2. 在React组件中使用`import`语句引入`lodash`库: ```javascript import _ from 'lodash'; ``` 3. 在组件中使用`lodash`库的函数: ```javascript const result = _.map([1, 2, 3], (num) => num * 2); ``` 请注意,如果你想在React组件中使用全局变量或全局函数,你可以将它们作为`window`对象的属性,并在组件中使用`window`对象引用它们。如,如果你想在React组件中使用全局变量`myGlobalVar`,可以按照以下步骤操作: 1. 在JavaScript文件中定义全局变量`myGlobalVar`: ```javascript window.myGlobalVar = 'hello world'; ``` 2. 在React组件中使用`window`对象引用全局变量`myGlobalVar`: ```javascript const myVar = window.myGlobalVar; ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值