React Native Context - 從渲染之外的 Context.provider 中檢索值 function

Question

我有一個已經使用上下文 api 的應用程序，它有許多提供程序。 我添加了一個名為 VideoContext 的新提供程序。

我只想讀取它的 activeVideo 值（在應用程序的其他地方設置）

class App extends Component {

    state = {
      videoState: 0,
    };

    setVideoState(){
     //logic to alter the videoState.
    }

...
 render() {
    return (
      // Config Context
      <ConfigContext.Provider value={this.decorateConfigContextFromProps()}>
        <VideoContext.Provider value={this.state.videoState}>
          {/* Theme Context */}
          <SomeOtherProvider theme={this.decorateStyledContextFromProps()}>
            {/* Redux Store Context */}
            <Provider store={this.rootStore}>
              <View style={{ flex: 1 }}>
                <StatusBar />
                <ConnectedApp />
              </View>
            </Provider>
          </SomeOtherProvider>
        </VideoContext.Provider>
      </ConfigContext.Provider>
    );
  }
}
App.contextType = ConfigContext;

子組件 - 樹下數英里

class DeepChild extends Component {   

  state = {
    activeVideo: '',
  };

  shouldComponentUpdate(nextProps: Props, nextState) {
    if (this.state.activeVideo !== nextState.activeVideo) {
      return true;
    }

    return //otherwise do some other logic here
  }
  ...

  render() {
    return (
      <View/>
        <VideoContext.Consumer>
          /* yuck! */
          {({activeVideo}) => {
            if(activeVideo !== this.state.activeVideo){
              this.setState({activeVideo: activeVideo}, () => {
                 console.log('this did indeed update the state');
              })
            }
          }}
        </VideoContext.Consumer>
        <FlatList...containing many items.../>
      </View>
    );
  }
}

如何讀取子 class 組件內 VideoContext Provider 提供的值，而不必將其埋入渲染器 function 內？ 我還沒有看到任何文檔。

謝謝。

Answer 1

像這樣使用 contextType

static contextType = VideoContext;

那么值將像 this.context.activeVideo 這樣訪問

例如

class DeepChild extends Component {   
      static contextType = VideoContext;
          state = {
            activeVideo: '',
          };
        
          shouldComponentUpdate(nextProps: Props, nextState) {
            if (this.state.activeVideo !== nextState.activeVideo) {
              return true;
            }
        
            return //otherwise do some other logic here
          }
          ...
        
          render() {
            return (
              <View/>
                <VideoContext.Consumer>
                  /* yuck! */
                  {({activeVideo}) => {
                    if(activeVideo !== this.state.activeVideo){
                      this.setState({activeVideo: activeVideo}, () => {
                         console.log('this did indeed update the state');
                      })
                    }
                  }}
                </VideoContext.Consumer>
                <FlatList...containing many items.../>
              </View>
            );
          }
        }