React：Typescript/Javascript 接口作為回調並訪問 state

Question

作為一名前 Java 工程師，我正在努力在 Typescript/Javascript 中使用接口作為回調。

我有一個“工人” class 我調用doWork(..., myWorkerCallback)回調由不同的回調方法組成。

interface WorkerCallback {
    onWorkDone() : void
    onError(message: String) : void
    ...
}

在我的調用組件中，我將有一個實現該回調接口的成員。

myWorkerCallback: WorkerCallback = {
    onWorkDone() {
    ...
    }
}

現在我需要在這些回調方法中訪問 React 組件的 state。 所以我需要綁定這個回調成員，對吧？ 但是如何綁定這個接口成員

Answer 1

我不確定 react-native 但將某些東西綁定到 function 的典型方法是使用閉包：

interface IWorkerCallback {
    onWorkDone(): void;
    onError(message: string): void;
    // ...
}

// Option 1: using object literals
function makeWorkerCallback(state: SomeState): IWorkerCallback  {
    return {
        onWorkDone: () => {
            state.update();
        },
        onError: () => { }
    }
}

// Option 2: using classes
class WorkerCallback implements IWorkerCallback {
    state: SomeState;

    constructor(state: SomeState) {
        this.state = state;
    }

    onWorkDone() {
        this.state.update();
    }

    onError(message: string) { }
}

// Usage example
const myWorkerCallback1 = makeWorkerCallback(state1);
const myWorkerCallback2 = makeWorkerCallback(state2);

const myWorkerCallback3 = new WorkerCallback(state3);
const myWorkerCallback4 = new WorkerCallback(state3);

盡管此時這些對象不是回調。 他們更多。 我會將它們重命名為“FooBarHandler”之類的。