尝试在 React 中呈现上下文提供程序，收到错误消息 "Element type is invalid..."

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>);
}

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

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. at invariant (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:118) at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:20273) at ReactCompositeComponentWrapper.performInitialMount (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29799) at ReactCompositeComponentWrapper.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690) at Object.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868) at ReactCompositeComponentWrapper.performInitialMount (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29803) at ReactCompositeComponentWrapper.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690) at Object.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868) at ReactCompositeComponentWrapper.performInitialMount (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29803) at 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文件夹，然后重新生成，一切正常。

尝试在 React 中呈现上下文提供程序，收到错误消息 "Element type is invalid..."

Trying to render a Context Provider in React, receiving error message "Element type is invalid..."

javascript

typescript

reactjs

react-context