React

如何將上下文從 DrizzleContext.Provider 發送到類組件/類容器

  • January 15, 2019

我在我的 dapp 中使用了新的 Context API 支持的 ‘drizzle-react’ 庫。誰能澄清一下如何接收從 DrizzleContext.Provider 發送到“類”組件的上下文?查看下面的範例 index.js 文件。想像一下 <App /> 組件是一個“類”組件而不是一個“功能組件”。對於“功能”組件,我想它非常簡單 - 使用 < DrizzleContext.Consumer >。但是如何在類組件中獲取上下文(drizzle = {drizzle})?我嘗試給一個帶有上下文道具的建構子,如下所示:

constructor(props,context) {...}

但這不起作用。有任何想法嗎 ?

我的 index.js 看起來像這樣:

&lt;!-- language: lang-jsx --&gt;
   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(
           (&lt;DrizzleContext.Provider drizzle={drizzle} &gt;
                   &lt;App /&gt;
           &lt;/DrizzleContext.Provider&gt;),
           document.getElementById('root')
       );

事實證明,可以使用此語句來獲取類組件中的上下文:

MyClassComponent.contextType = DrizzleContext.Consumer;

現在,如果我們在建構子中使用以下上下文:

constructor(props,context) {
super(props)
console.log(this.context);
}

這會將上下文對象 { drizzle, drizzleState, initialized } 輸出到控制台。即使我不確定 MyClassComponent.contextType 是否正確,因為我相信它是遺留 Context API 的一部分(如果我錯了,請糾正我)。

引用自:https://ethereum.stackexchange.com/questions/65535