用闭包反应上下文

时间:2020-05-19 09:47:47

标签: reactjs context-api

使用ReduxContext,正在尝试在组件中实现局部上下文,并传入一些全局数据。 但是遇到了2个路障。

  1. 上下文不能在类实用程序中使用
  2. 我不知道如何为上下文编写闭包,这些闭包会将值本地化到功能组件。

我的上下文方法可能不适合此用例,我想知道实现此用例的最佳方法是什么。

App.tsx

<TelemetryContext.Provider value={ user: 100, screenId: "0", setScreenId: (id) => void  }
   <Dashboard...
</MyContext.Provider>

Dashboard.tsx:

const myContext = UseContext(TelemetryContext);
myContext.setScreenId("1");
...
useEffect(() => {
   Telemetry.Log(someState);   //Expected to log { screenId : 1, userId: 100, someState }

}, [someState]);
...

return (<div> <Child1 /> <button onClick={this.changeSomeSate()}  </div> );

Child1.tsx

const myContext = UseContext(TelemetryContext);

myContext.setScreenId("2");
...
useEffect(() => {
   Telemetry.Log(childState);  //Expected to log { screenId : 2, userId: 100, childState }

}, [childState]);
...

return (<div> <button onClick={this.changeChildSate()}  </div> );

Telemetry.ts。

 //Already existing class utility where am trying to add screenId logs

    public class Telemetry {
       ...
       public Log(data: IDataFormat) {

          const context: TelemetryContext = getContext('TelemetryContext').  //This doesn't compile
          /*************************************
           *How to get context in the above line.
           *Tried [Redux.saga.effects][1]. getContext but it works only in sagas.
           **************************************/

         const { userId, screenId } = context;
         this.telemetyApi.post({ ...data, screenId, userId });
        .....


       }
    } 

0 个答案:

没有答案