React-picky:元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义

时间:2019-08-30 05:05:41

标签: reactjs typescript

我正在使用react-picky软件包来显示带有typescript的选择过滤器选项,您可以检查以下package.json的版本。当我使用没有打字稿的create-react-app时,一切正常。 也许有些库发生冲突。我尝试过更新react和react-dom,即使它显示与我附加的图像相同的错误。 这不是进出口问题。我尝试了每种方法导入导出。

Here is console snap Package.json

 {
  "name": "user-portal-client",
  "version": "1.0.0",
  "description": "Front-end code for the Coinstash user portal.",
  "scripts": {
    "start": "webpack-dev-server --open",
    "start:headless": "webpack-dev-server --host 0.0.0.0 --port 5000 --watch-poll",
    "build": "webpack --config webpack.config.prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@types/axios": "^0.14.0",
    "@types/classnames": "^2.2.7",
    "@types/history": "^4.7.0",
    "@types/react": "^16.4.18",
    "@types/react-dom": "^16.0.9",
    "@types/react-modal": "^3.8.1",
    "@types/react-places-autocomplete": "^7.2.3",
    "@types/react-router-dom": "^4.3.1",
    "@types/react-share": "^2.1.1",
    "@types/react-sidebar": "^3.0.0",
    "@types/socket.io-client": "^1.4.32",
    "@types/styled-components": "4.1.8",
    "@types/url-join": "^4.0.0",
    "awesome-typescript-loader": "^5.2.1",
    "copy-webpack-plugin": "^4.4.2",
    "source-map-loader": "^0.2.4",
    "styled-components": "^4.2.0",
    "ts-node": "^7.0.1",
    "typescript": "^3.5.2",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "@blueprintjs/core": "^3.10.0",
    "@blueprintjs/datetime": "^3.6.0",
    "@blueprintjs/select": "^3.5.0",
    "@types/body-scroll-lock": "^2.6.1",
    "@types/reactour": "^1.13.1",
    "antd": "^3.16.3",
    "apexcharts": "^3.6.8",
    "axios": "^0.19.0",
    "body-scroll-lock": "^2.6.4",
    "classnames": "^2.2.6",
    "decimal.js": "^10.1.1",
    "mobile-detect": "^1.4.3",
    "moment": "^2.22.2",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-google-contacts": "0.0.1",
    "react-media": "^1.9.2",
    "react-modal": "^3.8.1",
    "react-picky": "^4.5.2",
    "react-places-autocomplete": "^7.2.0",
    "react-router-dom": "^4.3.1",
    "react-share": "^3.0.0",
    "react-sidebar": "^3.0.2",
    "reactour": "^1.15.0",
    "recordrtc": "^5.5.2",
    "socket.io-client": "^2.2.0",
    "url-join": "^4.0.0"
  }
}

App.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as Modal from "react-modal";
import Picky from "react-picky";

declare const document: HTMLDocument;
Modal.setAppElement("#root");

const App = () => (
  <div>
    <Picky
      id="picky"
      options={[1, 2, 3, 4, 5]}
      value={[]}
      multiple={true}
      includeSelectAll={true}
      includeFilter={true}
      onChange={values => console.log(values)}
      dropdownHeight={600}
    />
    ;
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));

declare let module: any;

if (module.hot) {
  module.hot.accept();
}

0 个答案:

没有答案