3

Typescript を使用して、Redux と Maquettejs を使用した todo-app の例に取り組んでいます。typescript をコンパイルするだけで、browserify を使用してすべての .js ファイルをバンドルします (このファイルには、アプリケーションの .ts ファイルとライブラリ [redux、maquettejs] が含まれています)。コンパイル時にエラーは発生せず、すべて問題ありません。

ブラウザで結果を表示しようとすると、このエラーが発生します。

ここに画像の説明を入力

明示的に定義されているため、少なくとも私にとっては意味がありません。私はコンパイルされたコードを判断する専門家ではありませんが、模擬実装http://jsbin.com/tenohitumi/edit?js,console,outputを作成した場合、期待どおりに動作します。何が起こっているのかよくわかりません。

念のため、これは typescript で書かれたクラス「App」です。

import { h, VNodeProperties, VNode } from 'maquette';
import { Store } from 'redux';
import { TodoList } from './Todolist';

export class App {

    constructor(private store: Store<any>) {
    }

    render(): VNode {
        this.store;
        return h('div.main-component', [
            new TodoList(this.store).render()
        ]);
    }
}

// This is how I create the instance (it's in a different file)

import { createStore } from 'redux';
import { createProjector } from 'maquette';

import * as I from './interfaces/app';
import { MainReducer } from './reducers';
import { App } from './components/App';

let store = createStore(MainReducer);

let projector = createProjector();


document.addEventListener('DOMContentLoaded', function () {
  let app = new App(store);
  projector.append(document.body, app.render);
});

とにかく、匿名関数の外側 (バンドル自体) が「this」の値に影響を与える可能性があるか、またはこれが設定されないようにするかどうかを知りたいですか?

4

1 に答える 1

5

@squint がコメントで回答したように、メソッドを に渡すと、メソッドはそのインスタンスrenderから孤立しています。元のラインの交換を検討するAppprojector.append

projector.append(document.body, app.render);

と

projector.append(document.body, () => app.render());

renderまたは、代わりに矢印関数を使用して定義することもできます。これは、 への元の参照を保持しませんthis。

export class App {
    constructor(private store: Store<any>) {
    }

    render = (): VNode => {
        return h('div.main-component', [
            new TodoList(this.store).render()
        ]);
    }
}
于 2016-11-06T00:09:22.713 に答える