比较来自世界各地的卖家的域名和 IT 服务价格

如何在新上下文中发出一些静态条件 API 反应 v16.6

嗨,我正在尝试访问组件中的多个上下文,但我只能从供应商那里使用一个上下文值取得成功。 有两个提供商
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//, 但我想访问如上所述的上下文。 任何帮助将不胜感激。

已邀请:

八刀丁二

赞同来自:

一个旁路轨道是使用shell,它将两个上下文组合成一个,然后导出shell。 有几种方法可以实现shell,但这是其中之一:


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 =&gt; /
<context2.consumer>
{context2 =&gt; /
<contextcombined1and2.provider context1,="" context2="" value="{{" }}="">
{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}=""></need2contexts>
</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></need2contexts>
</context2.provider>
</context1.provider>
</div>
/;
}

const rootElement = document.getElementById/"root"/;
ReactDOM.render/<app></app>, rootElement/;


你可以看到它的行动并在这里玩他:

https://codesandbox.io/s/xv373l5ynz

小姐请别说爱

赞同来自:

这是由B的解释。
https://reactjs.org/docs/conte ... ttype
:

您只能使用此订阅一个上下文 API. 如果您需要阅读多个文本,请参阅部分
https://reactjs.org/docs/conte ... texts
.

要回复问题请先登录注册