"React.createContext is not a function" 在 CodeSandbox 中使用 `@emotion/core` 和最新版本的 React

Question

我正在使用 @emotion/core。它可以在我的机器上运行，但是当我尝试在 codesandbox 中使用它时出现错误：

React.createContext is not a function

关于此错误的其他帖子已通过更新反应版本解决。但是代码沙箱使用的是最新版本。

这是我的沙箱：https://codesandbox.io/s/emotion-mp0zc 这是我的代码：

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;

Answer 1

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

https://reactjs.org/blog/2018/03/29/react-v-16-3.html

还更正了此处的导入：

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

应该是：

import { css } from '@emotion/core'

最后，添加了 react-dom 来呈现您的 CompoundInterestGraph 组件。 你能查一下吗？

https://codesandbox.io/s/emotion-w3que