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上[作为_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文件夹，然后重新生成该文件夹，一切正常。

尝试在React中呈现一个Context Provider，收到错误消息“元素类型无效...”

1 个答案: