javascript - 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/country/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(我只是为了测试而添加。它会给你一些想法。我不会在其中添加此代码。)