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

Posted 2023-02-21

【中文标题】在 tsx 编译错误中导入 jsx 文件

【英文标题】：import jsx file in tsx compilation error

【发布时间】：2017-05-08 10:27:21

【问题描述】：

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

错误 TS2604：JSX 元素类型“测试”没有任何构造或 调用签名。

我使用 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 中调用它。

【问题讨论】：

What does the error "JSX element type '...' does not have any construct or call signatures" mean?的可能重复

通常谷歌搜索特定的错误信息会给你想要的结果。请先尝试。

对于未来的搜索者，我认为这有答案 - typescriptlang.org/docs/handbook/jsx.html（即只需将您的 jsx 重命名为 tsx 并在您的 tsconfig.json 中添加 "jsx": "react"

【参考方案1】：

我从 tsx 创建 jsx，然后决定是否使用它。或其他组件。你可以看看这个github repository.上的代码