React.createElement:类型无效,但TypeScript可以正确编译。为什么?

时间:2018-12-02 16:19:52

标签: reactjs typescript

我有一个使用TS react guide使用以下webpack配置创建的小项目:

module.exports={entry:"./src/index.tsx",output:{filename:"bundle.js",path:__dirname+"/dist"},devtool:"source-map",resolve:{extensions:[".ts",".tsx",".js",".json"]},module:{rules:[{test:/\.tsx?$/,loader:"awesome-typescript-loader"},{enforce:"pre",test:/\.js$/,loader:"source-map-loader"},{test:/\.css$/,loader:"css-loader"}]},externals:{react:"React","react-dom":"ReactDOM"},mode:"development"};

以及以下tsconfig.json:

{compilerOptions:{outDir:"./dist/",sourceMap:!0,noImplicitAny:!0,module:"commonjs",target:"es6",jsx:"react",resolveJsonModule:!0,experimentalDecorators:!0,emitDecoratorMetadata:!0,types:["reflect-metadata"]},include:["./src/**/*","./definitions.d.ts"]};

即使在定义了Select component(由于MCR项目不提供输入内容)之后,我仍希望包括Google的官方反应材料组件:

declare module '@material/react-select' {
  export interface SelectOption {
    label: string,
    value: string,
    disabled: boolean
  }

  export interface SelectProps {
    label?: string;
    onChange?: (event: SelectEvent) => void;
    options?: [SelectOption];
  }

  export interface SelectEvent {
    target: SelectOption
  }

  export class Select extends React.Component<SelectProps> {

  }
}

该项目确实可以使用webpack编译,但是当我尝试显示Select组件时,出现此错误:

React errors

作为参考,此代码代表触发此错误的代码(其中,选项是从我要显示给<option key={x.id} value={x.id}>{x.name}</option>元素的JSON数据的映射调用中生成的):

import { Select, SelectEvent } from "@material/react-select"
...

onReferenceOptionChanged(event: SelectEvent): void {
  ...
}

render() {
  if (this.state.showProgress) {
    return (<Loader showLoading={true} progressMessage="Loading forms..."></Loader>);
  }

  if (this.state.showErrorMessage) {
    return (<Loader showErrorMessage={true} retryCallback={this.handleRetry}></Loader>);
  }

  var refOptions = this.state.references.map(x => {
    return <option key={x.id} value={x.id}>{x.name}</option>
  });

  return (
    <div>
      <Select onChange={(event) => this.onReferenceOptionChanged(event)}>
        {refOptions}
      </Select>
    </div>
  );
}

如何修改我的配置,以免发生这种情况?

编辑: 我从webpack编译中得到了这些警告,也许它们是相关的: Webpack Warnings

这是我的package.json deps块:

package.json

仅将Select更改为select可以通过还原原始Chrome选择元素来解决此问题。

0 个答案:

没有答案