react引入js文件
时间: 2023-10-22 10:06:49 浏览: 148
引入文件
4星 · 用户满意度95%
你可以在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;
```
阅读全文