尝试在 React 中渲染上下文提供程序，收到错误消息“元素类型无效...”

Question

我正在尝试使用 TypeScript 在 React 中呈现上下文提供程序。

以下代码以非常简单的方式代表了我想要实现的目标。

import * as React from "react";

public render() {
    let ctx = React.createContext("test");
    console.log(ctx.Provider);
    return (
        <ctx.Provider value={"hello world"}>
            <div>
                Hello
            </div>
        </ctx.Provider>);
}

一旦呈现此方法，就会出现此错误消息：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。 在不变量（vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:118） 在 ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:20273) 在 ReactCompositeComponentWrapper.performInitialMount (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29799) 在 ReactCompositeComponentWrapper.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690) 在 Object.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868) 在 ReactCompositeComponentWrapper.performInitialMount (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29803) 在 ReactCompositeComponentWrapper.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690) 在 Object.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868) 在 ReactCompositeComponentWrapper.performInitialMount (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29803) 在 ReactCompositeComponentWrapper.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690)

我在其他类似问题中查找了该问题，但我得到的只是更新软件包。

我的包似乎是以下版本的最新版本：

"@types/node": "10.3.2",
"@types/chart.js": "2.7.18",
"@types/codemirror": "0.0.56",
"@types/history": "4.7.2",
"@types/react": "16.4.7",           // <-------------
"@types/react-dom": "16.0.9",       // <-------------
"@types/react-hot-loader": "3.0.6",
"@types/react-router": "4.4.0",
"@types/react-router-dom": "4.3.1",
"@types/react-virtualized": "9.18.3",
"@types/webpack-env": "1.13.0",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "3.0.0",
"awesome-typescript-loader": "4.0.1",
"chart.js": "2.7.2",
"css-loader": "0.28.4",
"csstype": "2.5.3",
"basscss": "8.0.4",
"colors.css": "3.0.0",
"normalize.css": "8.0.0",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"svg.js": "2.6.5",
"svg.panzoom.js": "1.2.0",
"json-loader": "0.5.4",
"popper.js": "1.0.1",
"react": "16.6.0",                // <-------------
"react-dom": "16.6.0",            // <-------------
"react-hot-loader": "3.1.3",
"react-router-dom": "4.3.1",
"react-virtualized": "9.19.1",
"style-loader": "0.18.2",
"typescript": "3.0.3",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-cli": "^3.0.2",
"webpack-command": "^0.2.0",
"webpack-hot-middleware": "2.18.2"

有人知道如何解决这个问题吗？

Answer 1

经过数小时的搜索，我自己找到了解决方案。

解决方案是删除 dist 文件夹，然后重新生成该文件夹，一切正常。