如何获取const MyContext = React.createContext（）;对于React js中的其他组件

Question

我正在使用新的Context API制作新应用。但在MyProvider comp获取错误说未定义Provider.so朋友我怎么能实现这个MyContext。我创建了所有.js文件分开。以及放置“const MyContext = React.createContext（）;”

的位置

App.js

import React, {Component} from 'react';
import Calsi from './Calsi'
import MyProvider from './MyProvider'

const MyContext = React.createContext();


class App extends Component {

    constructor() {
        super();
        window.MyContext = MyContext;
    }


    render() {
        return (
            <MyProvider>
                <div>
                    <Calsi/>
                </div>
            </MyProvider>
        );
    }
}

export default App;

Calsi.js

import React, {Component} from 'react';
import Sum from './Sum'
export  default class Calsi extends Component{
    render() {
        return (
            <div>
                <Sum/>
            </div>
        );
    }

}

Sum.js

import React, {Component} from 'react';
const MyContext = window.MyContext;

export default class Sum extends Component {
    render() {

            return (
                <div>
                    <MyContext.Consumer>
                        {(context) => (
                            <React.Fragment>
                                <p>a:{context.state.a}</p>
                                <p>b:{context.state.b}</p>
                                <p>Sum: {context.state.a + context.state.b}</p>

                                <button onClick={context.increaseA}>increment a</button>
                            </React.Fragment>
                        )}
                    </MyContext.Consumer>
                </div>
            )
        }


}

Provider.js

import React, {Component} from 'react';
const MyContext = window.MyContext;
export default class MyProvider extends Component {

    state = {
        a: 0,
        b: 20,

    }

    render() {

            return (
                <MyContext.Provider value={{
                    state: this.state,
                    increaseA: () => this.setState({
                        a: this.state.a + 1
                    })
                }}>
                    {this.props.children}
                </MyContext.Provider>
            )
    }
}

我是新的反应，所以我怎么能做到这一点来纠正。我也在使用react 16.3.0 alpha2版本

Answer 1

您必须导出上下文。请勿将其附加到浏览器的窗口对象（window.MyContext = MyContext）。

创建一个新文件并将其命名为MyContext.js。

export const MyContext = React.createContext();

然后将其导入您的Provider.js：

import { MyContext } from "./MyContext";
...
<MyContext.Provider value={...}>