代码之家 › 专栏 › 技术社区 › Sakhi Mansoor

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

reactjs javascript

Sakhi Mansoor · 技术社区 · 6 年前

嗨,我正在尝试访问一个组件中的多个上下文,但我只从提供程序获得了一个上下文值。有两个提供者 ListContext 和`映射上下文。如何访问这样的上下文:

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()中使用多个提供程序,但我想访问上面这样的上下文。如有任何帮助,我们将不胜感激。

谢谢

2 回复 | 直到 6 年前

Ryan Cogswell 6 年前

一个解决方法是使用一个包装器,将两个上下文组合成一个,然后导出包装器。实现包装器有多种方法,但有一种方法:

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);

您可以在这里看到这一点并加以利用: