Question

尝试做一些我认为会非常简单的事情。我想导入一个现有的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;

只是想知道为了使这项工作我需要做些什么的神奇组合。也许我只是错过了这一点。该示例给出了错误＆＃34; TypeError：_blah.blah未定义＆＃34;。

Answer 1

命名导出：

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

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.

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

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

默认导出：

另一方面，如果你有一个只做一件事的模块（可能是一个React类，一个普通的函数，一个常量，或其他任何东西），并希望让其他人可以使用它，你可以使用< strong>默认导出。假设我们有一个文件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';

Answer 2

import * as utils from './utils.js';

如果您执行上述操作，则可以将utils.js中的函数用作

utils.someFunction()

使用webpack，ES6，ReactJS

2 个答案: