在React中未定義上下文值

Question

為什么上下文值顯示未定義？

SRC / Context.js：

import React, { Component } from 'react';

const Context = React.createContext();

export class Provider extends Component {
  state = { a: 1, b: 2 };
  render() {
    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    );
  }
}
export const Consumer = Context.Consumer;

SRC /國家/ CountryList.js：

import React, { Component } from 'react';
import { Consumer } from '../../Context';

class CountryList extends Component {
  render() {
    return (
      <Consumer>
        {value => {
          console.log('val:' + value);
        }}
      </Consumer>
    );
  }
}
export default CountryList;

試圖在CountryList中傳遞上下文值，但顯示未定義，無法弄清原因。 提前致謝

Answer 1

您需要使用Provider包裝CountryList組件，即需要導入Provider。

import React, { Component } from 'react';
import { Provider,Consumer } from '../../Context';

class CountryList extends Component {
  render() {
    return (
      <Provider>
        <Consumer>
          {value => {
            console.log('val:' + value);
          }}
        </Consumer>
     </Provider>
    );
  }
}
export default CountryList;

此處的Stackblitz示例： https ://stackblitz.com/edit/react-143zwt（我剛剛添加了進行測試。它會給您帶來想法。我不在此處添加此代碼。）