Как использовать React ContextAPI в файле stati c html - PullRequest
Новая
       45

Как использовать React ContextAPI в файле stati c html

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

У меня есть файл stati c html и используется скрипт umd, например: 

<script src="https://unpkg.com/react@16.8/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16.8/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>

Я могу использовать <MyContext.Provider> and <MyContext.Consumer>. Но не в состоянии использовать 

static contextType = MyContext;

Выходные данные для console.log (this.context) получают пустой объект

1 Ответ

1 голос
/ 18 марта 2020

Я запускаю этот пример из https://medium.com/@muddassirm / Reaction-context-api-made-simple-a778ec819fa7 . Кажется, это работает!

Код работает в Plunker https://plnkr.co/edit/A4YCEJR3GvqVgs6X?preview

const Context = React.createContext();

const ContextApp = () => {
  return (
    <Context.Provider value={['THE', 'QUICK', 'BROWN', 'FOX', 'JUMPS', 'OVER', 'THE', 'LAZY', 'DOG']}>
        <CustomComponent/>
    </Context.Provider>
  )
}

class CustomComponent  extends React.Component {    
  render(){
      let context = this.context      
      return(<div>{context.map((item) => <li>{item}</li>)}</div>)
  }  
}

CustomComponent.contextType = Context

// Render it
ReactDOM.render(
  <ContextApp />,
  document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
...