React
如何將上下文從 DrizzleContext.Provider 發送到類組件/類容器
我在我的 dapp 中使用了新的 Context API 支持的 ‘drizzle-react’ 庫。誰能澄清一下如何接收從 DrizzleContext.Provider 發送到“類”組件的上下文?查看下面的範例 index.js 文件。想像一下 <App /> 組件是一個“類”組件而不是一個“功能組件”。對於“功能”組件,我想它非常簡單 - 使用 < DrizzleContext.Consumer >。但是如何在類組件中獲取上下文(drizzle = {drizzle})?我嘗試給一個帶有上下文道具的建構子,如下所示:
constructor(props,context) {...}
但這不起作用。有任何想法嗎 ?
我的 index.js 看起來像這樣:
<!-- language: lang-jsx --> import React from 'react'; import ReactDOM from 'react-dom'; import { Drizzle, generateStore } from "drizzle"; import { DrizzleContext } from "drizzle-react"; import { LoadingContainer } from 'drizzle-react-components' import './index.css'; import App from './App'; //import * as serviceWorker from './serviceWorker'; import drizzleOptions from './drizzleOptions'; const drizzleStore = generateStore(drizzleOptions); const drizzle = new Drizzle(drizzleOptions, drizzleStore); ReactDOM.render( (<DrizzleContext.Provider drizzle={drizzle} > <App /> </DrizzleContext.Provider>), document.getElementById('root') );
事實證明,可以使用此語句來獲取類組件中的上下文:
MyClassComponent.contextType = DrizzleContext.Consumer;
現在,如果我們在建構子中使用以下上下文:
constructor(props,context) { super(props) console.log(this.context); }
這會將上下文對象 { drizzle, drizzleState, initialized } 輸出到控制台。即使我不確定 MyClassComponent.contextType 是否正確,因為我相信它是遺留 Context API 的一部分(如果我錯了,請糾正我)。