web-dev-qa-db-ja.com

JavaScriptファイルをインポートし、webpack、ES6、ReactJSを使用して関数を呼び出します

私が考えていることをやろうとするのはとても簡単だろう。既存の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 is undefined」というエラーが発生します。

reactjsecmascript-6webpack
54
user1686620

名前付きエクスポート：

utils.jsというファイルを作成し、他のモジュールで使用できるようにするユーティリティ関数（たとえば、Reactコンポーネント）を作成するとします。次に、各関数をnamed 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)

デフォルトのエクスポート：

一方、1つのことだけを行うモジュール（Reactクラス、通常の関数、定数など）があり、そのことを他の人が利用できるようにしたい場合は、 デフォルトのエクスポートを使用します。 log.jsというファイルがあり、呼び出された引数をログアウトする関数が1つだけあるとします。

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）と名前付きエクスポート（1つずつインポートするか、別名で*を使用してインポートする）の両方を含めることができます。 Reactには実際にこれがあります：

import React, { Component, PropTypes } from 'react';
125
tobiasandersen
import * as utils from './utils.js';

上記を行うと、utils.jsの関数を次のように使用できます。

utils.someFunction()
2
KalC