使用 webpack、ES6、ReactJS 导入 JavaScript 文件和调用函数

IT技术 reactjs ecmascript-6 webpack
2021-04-15 10:49:34

尝试做一些我认为非常简单的事情。我想导入一个现有的 JavaScript 库，然后调用它的函数。例如，我想导入 blah.js 然后调用 blah()。

import React from 'react';
import {blah} from 'blah/js/blah.js';

class MyClass extends React.Component {
    constructor() {
        super();
    }

    componentDidMount() {
        window.addEventListener('resize', this.handleResize);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize);
    }

    handleResize() {
        blah.blah();
    }

    render() {
          ....
    }
}

export default MyClass;

只是想知道我必须做哪些神奇的事情才能完成这项工作。也许我只是错过了重点。该示例给出了错误“TypeError：_blah.blah 未定义”。

2个回答

命名出口：

假设您创建了一个名为 的文件utils.js，其中包含您希望为其他module（例如 React 组件）提供的实用程序函数。然后，您将使每个函数成为命名导出：

export function add(x, y) {
  return x + y
}

export function mutiply(x, y) {
  return x * y
}

假设 utils.js 与您的 React 组件位于同一目录中，您可以像这样使用它的导出：

import { add, multiply } from './utils.js';
...
add(2, 3) // Can be called wherever in your component, and would return 5.

或者，如果您愿意，可以将整个module的内容放在一个公共命名空间下：

import * as utils from './utils.js'; 
...
utils.multiply(2,3)

默认导出：

另一方面，如果你有一个只做一件事的module（可以是一个 React 类、一个普通函数、一个常量或其他任何东西）并且想要让其他人可以使用它，你可以使用默认的 export。假设我们有一个 file log.js，只有一个函数可以注销它调用的任何参数：

export default function log(message) {
  console.log(message);
}

现在可以这样使用：

import log from './log.js';
...
log('test') // Would print 'test' in the console.

log导入时不必调用它，实际上可以随意调用它：

import logToConsole from './log.js';
...
logToConsole('test') // Would also print 'test' in the console.

综合：

一个module可以同时具有默认导出（最多 1 个）和命名导出（一个一个导入，或*与别名一起使用）。React 实际上有这个，请考虑：

import React, { Component, PropTypes } from 'react';
哦，我错过了。谢谢！
2021-05-23 10:49:34
如何仅导入 util 并调用 util.add(), util.multiply() 等函数？
2021-05-26 10:49:34
@jiawen 您可以这样做：（import * as util from './utils.js'; 我也将此添加到答案中）。
2021-06-03 10:49:34
有道理，但现在我收到这样的错误：SyntaxError：导出声明​​可能只出现在module的顶层
2021-06-04 10:49:34
那么你可能会在其他块中导出东西。当错误读取时，您需要在顶级（即在任何块之外）执行此操作。
2021-06-07 10:49:34 
import * as utils from './utils.js';

如果您执行上述操作，您将能够使用 utils.js 中的函数作为 

utils.someFunction()
其它你可能感兴趣的问题
上一篇如何在 react.js 中监听状态变化？ 下一篇React.js：如何在点击时附加组件？