Question

我正在尝试在tsx文件中导入jsx文件。这导致错误

错误TS2604：JSX元素类型＆＃39;测试＆＃39;没有任何构造或呼叫签名。

我使用webpack，react，typescript，导入tsx文件没有问题，但是任何jsx文件都会导致编译错误，

的package.json

{
  "name": "typescript-babel-webpack",
  "version": "1.0.0",
  "description": "A simple lightweight TypeScript + Babel + Webpack project.",
  "scripts": {
    "build": "webpack"
  },

  "license": "",
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.1",
    "inline-style-prefixer": "^2.0.4",
    "react-style-proptype": "^1.4.0",
    "style-loader": "^0.13.1",
    "ts-loader": "^1.3.1",
    "typescript": "^2.1.4",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "@types/react": "^0.14.55",
    "@types/react-dom": "^0.14.19"

  },
  "dependencies": {
    "event-emitter-es6": "^1.1.5",
    "inline-style-prefixer": "^2.0.4",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-style-proptype": "^1.4.0"
  }
}

tsconfig.json

{   "compilerOptions": {
    "module": "commonjs",
     "target": "es6",
    "sourceMap": true,
    "jsx": "react",
     "allowJs":true

   },   "exclude": [
     "node_modules"   ] }

webpack.json

module.exports = {
  entry: [ './src/index.tsx'],
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  devtool: 'eval-source-map',
  resolve: {
    extensions: ['', '.js', '.jsx','.ts','.tsx','.css']
  },
  module: {
    loaders: [
      { test: /\.css$/, exclude: /node_modules/,loader: "style!css" },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
        {
            test: /\.jsx$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        },

      { test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/}
    ]
  }
};

我能够通过在函数中包装来自jsx的ReactComponenet并在tsx中使用它来使其工作。这是代码

tsx文件

import * as React from  "react";
import * as ReactDom from 'react-dom'
import {componenetFactory} from './Test'

export class SplitPaneCom  extends   React.Component<any,any>{
  constructor(props){
    super(props);
  }

  render(){

    let componentInstance=componenetFactory();
    return componentInstance;
  }

}

ReactDom.render(<SplitPaneCom/>,document.getElementById("jumboTron"));

jsx文件

import React, { Component, PropTypes } from 'react';

export  class TestComponenet extends  Component{
    constructor(props){
        super(props);
    }


    render(){
        return (<div>Testzcdf content</div>);
    }
}

export let componenetFactory=function(){
    return <TestComponenet/>
}

如果我尝试直接使用TestComponenet，我会收到错误，我将其包装在函数中并在tsx中调用它。

Answer 1

我从tsx创建jsx，然后确定是否使用它。或其他组件。您可以查看此github repository.

上的代码

在tsx编译错误中导入jsx文件

1 个答案: