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

Question

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

error TS2604: JSX element type 'Test' does not have any construct or call signatures.

我使用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.上的代码