文章/答案/技术大牛

发布

社区首页 >问答首页 >React:作为回调和访问状态的Typescript/Javascript接口

问React:作为回调和访问状态的Typescript/Javascript接口
EN

Stack Overflow用户

提问于 2019-10-21 16:46:28

回答 1查看 357关注 0票数 0

作为一名前Java工程师，我正在努力在Typescript/Javascript中有一个接口作为回调。

我有一个"worker“类，我在其中调用doWork(..., myWorkerCallback)，回调由不同的回调方法组成。

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

在我的调用组件中，我会有一个实现回调接口的成员。

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

现在，我需要访问这些回调方法中的React组件的状态。所以我需要绑定这个回调成员，对吗？但是如何绑定这个接口成员

typescript

react-native

javascript

reactjs

回答 1

Stack Overflow用户

发布于 2019-10-21 19:13:16

我不确定react原生的，但是将一些东西绑定到函数的典型方法是使用闭包：

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“之类的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58482738

复制

相似问题

问React:作为回调和访问状态的Typescript/Javascript接口
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React:作为回调和访问状态的Typescript/Javascript接口EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React:作为回调和访问状态的Typescript/Javascript接口
EN