尝试做一些我认为非常简单的事情。我想导入一个现有的 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 未定义”。
最佳答案
命名导出:
假设您创建了一个名为 utils.js
的文件,其中包含您希望可供其他模块(例如 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.
或者,如果您愿意,可以将整个模块的内容放在公共(public)命名空间下:
import * as utils from './utils.js';
...
utils.multiply(2,3)
默认导出:
另一方面,如果你有一个只做一件事的模块(可以是一个 React 类、一个普通函数、一个常量或其他任何东西)并且想让该东西可供其他人使用,你可以使用 <强>默认导出。假设我们有一个文件 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.
组合:
模块可以同时具有默认导出(最多 1 个)和命名导出(逐一导入,或使用带有别名的 *
)。 React 实际上有这个,考虑一下:
import React, { Component, PropTypes } from 'react';
关于reactjs - 使用 webpack、ES6、ReactJS 导入 JavaScript 文件并调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38467574/