Reactjs &引用；React.createContext不是一个函数；在CodeSandbox中使用“@emotion/core”和最新版本的React时

我正在使用

@emotion/core

。它在我的机器上工作，但当我尝试在codesandbox中使用它时，我得到了错误：

React.createContext不是一个函数

有关此错误的其他帖子可以通过更新react的版本来解决。但是代码沙盒使用的是最新版本

这是我的沙箱： 这是我的代码：

import React from 'react';
import styled from '@emotion/styled';
import { css } from '@emotion/core'
/* eslint-disable */

class CompoundInterestGraph extends React.Component {
    state = {
        principal: 3,
        R: 5,
        n: 12,
        t: 30,
        numLattes: 1,
        retirement: 0,
    };
    componentDidMount () {

    }
    setValue(e) {
        this.setState({ numLattes: e });
    }

    constructor(props) {
        super(props);
        const { numLattess, retirement, principal, R, n, t } = this.props;
        this.state = {
            principal: 3,
            R: 5,
            n: 12,
            t: 30,
            numLattes: 1,
            retirement: 0,
        };
        this.setValue = this.setValue.bind(this);
    }

    handleInputChange = event => {
        const { name, value } = event.target;
        this.setState({ [name]: value });
    };

    compoundInterest = (principal, R, n, t) => {
        const r = R > 1 ? R / 100 : R;
        var frac = r / n;
        var compoundInterestForPrincipal = Math.pow(1 + frac, n * t);

        var futureValueOfSeries = (compoundInterestForPrincipal - 1) / (r / n);

        compoundInterestForPrincipal *= principal;
        futureValueOfSeries *= principal;
        var future401kValue =
            compoundInterestForPrincipal + futureValueOfSeries;

        return (
            '$' +
            future401kValue.toLocaleString(undefined, {
                maximumFractionDigits: 2,
            })
        );
    };

    handleChange = function(event) {
        var costOfnumLattes = 3;

        this.setState({
            numLattes: event.target.value,
            principal: event.target.value * costOfnumLattes * 4,
        });
    };

    render() {
        const { principal, R, n, t, numLattes, retirement } = this.state;

        return [
            <div key="0">
                <div>
                    You are drinking <b>{numLattes}</b> less latte a week
                </div>
                <Input
                    id="typeinp"
                    type="range"
                    min="0"
                    max="10"
                    value={numLattes}
                    onChange={this.handleChange.bind(this)}
                    step="1"
                />
            </div>,
            <Div key="1">
                <b>{this.compoundInterest(principal, R, n, t)}</b>
            </Div>,
            <Table key="2">
                <tbody>
                    <tr className="ui header">
                        <th>Principal</th>
                    </tr>
                    <tr>
                        <td>
                            <form>
                                <input
                                    type="text"
                                    placeholder={principal}
                                    onChange={this.handleInputChange}
                                    disabled="disabled"
                                />
                            </form>
                        </td>
                    </tr>
                    <tr className="ui header">
                        <th>Rate of return</th>
                    </tr>
                    <tr>
                        <td>
                            <form>
                                <input
                                    type="text"
                                    placeholder="5%"
                                    onChange={this.handleInputChange}
                                    name="R"
                                    value={R}
                                />
                            </form>
                        </td>
                    </tr>
                    <tr className="ui header">
                        <th>Number of times interest is compounded</th>
                    </tr>
                    <tr>
                        <td>
                            <form>
                                <input
                                    type="text"
                                    placeholder="12"
                                    onChange={this.handleInputChange}
                                    name="n"
                                    value={n}
                                />
                            </form>
                        </td>
                    </tr>
                    <tr className="ui header">
                        <th>Investment Duration (years)</th>
                    </tr>
                    <tr>
                        <td>
                            <form>
                                <input
                                    type="text"
                                    placeholder="30"
                                    onChange={this.handleInputChange}
                                    name="t"
                                    value={t}
                                />
                            </form>
                        </td>
                    </tr>
                </tbody>
            </Table>,
            <div key = "4">
              <b>How did we get these numbers?</b>

              <div className ={equation}>
                <p>
                P (1 +
                <p className={fraction}>
                  <span className="num">1</span>
                  <span className="symbol">/</span>
                  <span className="bottom">2</span>
                </p>
                )
                 <sup>(nt)</sup>
                   </p>
              </div>
            </div>
        ];
    }
}
const Table = styled.table`
    margin-top: 100px;
    width: 30%;
`;

const fraction = css`
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.0001em;
    text-align: center;

    .num {
      display: block;
      padding: 0;
      height: 12px;
      line-height: 12px;
    }

    .bottom {
      border-top: thin solid black;
    }

    .symbol {
      display: none;
    }
`
const equation = css`
p {
    font-size:large !important;
  }
`;

const Input = styled.input`
    width: 30% !important;
`;

const Div = styled.label`
    display: flex;
    align-items: flex-end;
    align-self: flex-end;
    text-align: right;
    width: 30%;
`;
export default CompoundInterestGraph;

从“React”导入React；
从'@emotion/styled'导入样式；
从“@emotion/core”导入{css}
/*eslint禁用*/
类CompoundInterestGraph扩展React.Component{
状态={
校长:3,，
R:5，
n:12，
t:30，
核型：1，
退休人数：0，
};
组件安装（）{
}
设定值（e）{
this.setState（{numLattes:e}）；
}
建造师（道具）{
超级（道具）；
const{numLattess，retirement，principal，R，n，t}=this.props；
此.state={
校长:3,，
R:5，
n:12，
t:30，
核型：1，
退休人数：0，
};
this.setValue=this.setValue.bind（this）；
}
handleInputChange=事件=>{
常量{name，value}=event.target；
this.setState（{[name]：value}）；
};
复合兴趣=（主体，R，n，t）=>{
常数r=r>1？r/100:r；
var frac=r/n；
var compoundInterestForPrincipal=数学功率（1+frac，n*t）；
var futureValueOfSeries=（委托人的组合利益-1）/（r/n）；
委托人的复合利益*=委托人；
系列的未来价值*=本金；
var未来401K价值=
本金+系列未来价值的复合利益；
返回(
'$' +
future401kValue.toLocaleString（未定义{
最大分数位数：2，
})
);
};
handleChange=函数（事件）{
风险价值成本（var CostOfNumlates）=3；
这是我的国家({
numLattes:event.target.value，
委托人：event.target.value*costOfnumLattes*4，
});
};
render（）{
const{principal，R，n，t，numLattes，retirement}=this.state；
返回[
你每周喝的拿铁少了{numLattes}
,
{this.compoundInterest（principal，R，n，t）}
,
校长
回报率
复利次数
投资期限（年）
,
我们是怎么得到这些数字的？

P（1）+

1.
/
2.

)
（新界）

];
}
}
const Table=styled.Table`
边缘顶部：100px；
宽度：30%；
`;
常量分数=css`
显示：内联块；
位置：相对位置；
垂直对齐：中间对齐；
字母间距：0.0001em；
文本对齐：居中；
纳姆先生{
显示：块；
填充：0；
高度：12px；
线高：12px；
}
.底部{
边框顶部：薄而实的黑色；
}
.符号{
显示：无；
}
`
常数方程=css`
p{
字体大小：大！重要；
}
`;
常量输入=styled.Input`
宽度：30%！重要的；
`;
const Div=styled.label`
显示器：flex；
对齐项目：柔性端；
自对准：柔性端；
文本对齐：右对齐；
宽度：30%；
`;
导出默认的CompoundInterestGraph；

React v16.3引入了新的上下文api。 codesandbox中的React版本在16.3之前，所以我更新到了最新版本

还更正了此处的导入：

import { css } from 'Dependencies/@emotion/core'

应该是：

import { css } from '@emotion/core'

最后，添加react dom以呈现CompoundInterestGraph组件。 你能查一下吗

---

新的上下文api是在React v16.3中引入的。 codesandbox中的React版本在16.3之前，所以我更新到了最新版本

还更正了此处的导入：

import { css } from 'Dependencies/@emotion/core'

应该是：

import { css } from '@emotion/core'

最后，添加react dom以呈现CompoundInterestGraph组件。 你能查一下吗

---

这里有点上下文（请原谅这个双关语）<代码>反应。createContext在反应版本16.3中引入。OP共享的沙盒使用的是react版本16。2@apokryfos谢谢，你是对的，我在答案中添加了这个信息。这里有点上下文（请原谅这个双关语）<代码>反应。createContext在反应版本16.3中引入。OP共享的沙盒使用的是react版本16。2@apokryfos谢谢，你是对的，我在答案中添加了这个信息。