如何在 React v16.6 的新 CONTEXT API 中获取多个静态上下文

Posted 2023-04-14

【中文标题】如何在 React v16.6 的新 CONTEXT API 中获取多个静态上下文

【英文标题】：How to get multiple static contexts in new CONTEXT API in React v16.6

【发布时间】：2019-05-28 00:43:12

【问题描述】：

您好，我正在尝试访问一个组件中的多个上下文，但我只使用提供者提供的一个上下文值就获得了成功。有两个提供者ListContext 和`MappingContext。如何访问这样的上下文：

class TableData extends React.Component 
 static contextType = ListContext;
 static contextType = MappingContext;

 componentDidMount() 
   const data = this.context // it will have only one context from ListContext
  

我知道我可以在 render() 中使用多个提供程序，但我想访问像上面这样的上下文。任何帮助将不胜感激。

谢谢

【参考方案1】：

一种解决方法是使用将两个上下文组合为一个的包装器，然后导出该包装器。实现包装器的方法有多种，这里有一种：

Contexts.js

import React from "react";

export const Context1 = React.createContext("1");
export const Context2 = React.createContext("2");
export const ContextCombined1And2 = React.createContext("3");

ProvideCombinedContext.js

import React from "react";
import  Context1, Context2, ContextCombined1And2  from "./Contexts";

// This is a reusable piece that could be used by any component that requires both contexts.
const ProvideCombinedContext = props => 
  return (
    <Context1.Consumer>
      context1 => (
        <Context2.Consumer>
          context2 => (
            <ContextCombined1And2.Provider value= context1, context2 >
              props.children
            </ContextCombined1And2.Provider>
          )
        </Context2.Consumer>
      )
    </Context1.Consumer>
  );
;
export default ProvideCombinedContext;

Need2Contexts.js

import React from "react";
import  ContextCombined1And2  from "./Contexts";
import ProvideCombinedContext from "./ProvideCombinedContext";

class Need2Contexts extends React.Component 
  static contextType = ContextCombined1And2;
  componentDidMount() 
    console.log("Context=" + JSON.stringify(this.context));
  
  render() 
    return "this.context=" + JSON.stringify(this.context);
  


const WrappedNeed2Contexts = props => 
  return (
    <ProvideCombinedContext>
      <Need2Contexts ...props />
    </ProvideCombinedContext>
  );
;

export default WrappedNeed2Contexts;

index.js

import React from "react";
import ReactDOM from "react-dom";
import  Context1, Context2  from "./Contexts";
import Need2Contexts from "./Need2Contexts";

function App() 
  return (
    <div className="App">
      <Context1.Provider value="value1">
        <Context2.Provider value="value2">
          <Need2Contexts />
        </Context2.Provider>
      </Context1.Provider>
    </div>
  );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

您可以在此处查看并使用它：

【讨论】：

感谢详细的编码。很容易理解:)

对于类组件中的动态多上下文，请参阅linkedin.com/pulse/…

【参考方案2】：

这在React context documentation中有解释：

您只能使用此 API 订阅单个上下文。如果您需要阅读多个内容，请参阅Consuming Multiple Contexts。

【讨论】：

是的。但是，如果我需要 componentDidMount 中的两个上下文，解决方法是什么？