Невозможно заставить Context API работать в моем приложении React - PullRequest
Новая
       15

Невозможно заставить Context API работать в моем приложении React

0 голосов
/ 16 марта 2020

Я работал над проектом, который извлекает данные из API и получает больше информации о взаимодействии пользователя с моим веб-сайтом. Я пришел к выводу, что контекстный API React - это отличное решение, которое не использует MobX / Redux. Изучив контекстный API, я не смог заставить его работать с простым примером внизу. Спасибо. 

import React from "react";
import "./styles.css";
import MyProvider from "./MyProvider.js";

export class App extends React.Component {
  render() {
    return (
      <MyProvider>
        <div className="App">
          <InsideComp />
        </div>
      </MyProvider>
    );
  }
}

class InsideComp extends React.Component {
  render() {
    return (
      <MyProvider.Consumer>
        {data => <p> {data.state.itemStore} </p>}
      </MyProvider.Consumer>
    );
  }
}


import React, { Component } from "react";

const MyContext = React.createContext();

class MyProvider extends Component {
  state = {
    itemStore: "test"
  };

  render() {
    return (
      <MyContext.Provider
        value={{
          state: this.state
        }}
      >
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

export default MyProvider;

https://codesandbox.io/embed/sad-bohr-h693i?fontsize=14&hidenavigation=1&theme=dark

...