使用webpack,ES6,ReactJS导入JavaScript文件和调用函数 [英] Import JavaScript file and call functions using webpack, ES6, ReactJS
问题描述
尝试做一些我想会很简单的事情.我想导入一个现有的JavaScript库,然后调用它的函数.因此,例如,我想导入blah.js,然后调用blah().
Trying to do something I would think would be very simple. I would like to import an existing JavaScript library and then call it's functions. So for example I would like to import blah.js and then call 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未定义".
Just wondering what magical combination of things I have to do to make this work. Maybe I'm just missing the point. The example gives the error "TypeError: _blah.blah is undefined".
推荐答案
命名出口:
假设您创建了一个名为utils.js
的文件,其中包含要用于其他模块(例如React组件)的实用程序功能.然后,将每个函数命名为 export :
Let's say you create a file called utils.js
, with utility functions that you want to make available for other modules (e.g. a React component). Then you would make each function a named export:
export function add(x, y) {
return x + y
}
export function mutiply(x, y) {
return x * y
}
假设utils.js与React组件位于同一目录中,则可以像下面这样使用其导出:
Assuming that utils.js is located in the same directory as your React component, you can use its exports like this:
import { add, multiply } from './utils.js';
...
add(2, 3) // Can be called wherever in your component, and would return 5.
或者,如果愿意,可以将整个模块的内容放在一个通用的名称空间下:
Or if you prefer, place the entire module's contents under a common namespace:
import * as utils from './utils.js';
...
utils.multiply(2,3)
默认导出:
另一方面,如果您有一个仅做一件事的模块(可以是React类,正常函数,常量或其他任何东西),并且想让其他人可以使用,则可以使用默认导出.假设我们有一个文件log.js
,只有一个函数可以注销其调用的任何参数:
If you on the other hand have a module that only does one thing (could be a React class, a normal function, a constant, or anything else) and want to make that thing available to others, you can use a default export. Let's say we have a file log.js
, with only one function that logs out whatever argument it's called with:
export default function log(message) {
console.log(message);
}
现在可以像这样使用:
import log from './log.js';
...
log('test') // Would print 'test' in the console.
导入时不必调用它log
,实际上您可以根据需要调用它:
You don't have to call it log
when you import it, you could actually call it whatever you want:
import logToConsole from './log.js';
...
logToConsole('test') // Would also print 'test' in the console.
组合:
一个模块既可以具有默认导出(最多1个),也可以具有命名导出(一个或一个地导入,或者使用*
和一个别名导入). React实际上有这个,请考虑:
A module can have both a default export (max 1), and named exports (imported either one by one, or using *
with an alias). React actually has this, consider:
import React, { Component, PropTypes } from 'react';
这篇关于使用webpack,ES6,ReactJS导入JavaScript文件和调用函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!