TypeScript和ReactDOM.render方法不接受组件

Question

TL; DR

我正在使用TypeScript和React.我已经定义了我的AppContainer.tsx组件,将其导出为默认值.我在文件app.ts中使用ReactDOM它来生存它以将其呈现给目标dom元素.但我收到以下错误(见图).有关更多信息和GitHub repo的链接,请阅读以下内容.

问题:我在做什么或者解释是什么？从所有代码示例我看到这应该工作 - 但也许(显然)我错过了一些东西.以下是更多信息和完整GitHub仓库的链接.

---

环境

• 反应15.4.2
• 反应15.4.2
• 打字:https://github.com/aredfox/electron-starter/blob/master/typings.json
• tsconfig:https://github.com/aredfox/electron-starter/blob/master/tsconfig.json

码

文件'/components/AppContainer.tsx'

/// <reference path="../../../typings/index.d.ts" />

// Top level application component

/*------------------------------------------------------------------------------------*/
/** IMPORTS **/
import * as React from 'react';
import { Component } from 'react';
/*------------------------------------------------------------------------------------*/
/*///*/

/*------------------------------------------------------------------------------------*/
/** COMPONENT **/
export default class AppContainer extends React.Component<{}, {}> {    
    render() {
        return ( <div /> );
    }    
}        
/*------------------------------------------------------------------------------------*/
/*///*/

https://github.com/aredfox/electron-starter/blob/master/src/views/components/AppContainer.tsx

文件'app.ts'

/// <reference path="../../typings/index.d.ts" />
/// <reference path="interfaces.d.ts" />

// Setting up react inside the host html

/*------------------------------------------------------------------------------------*/
/** IMPORTS **/
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// Components
import AppContainer from './components/AppContainer';
/*------------------------------------------------------------------------------------*/
/*///*/

/*------------------------------------------------------------------------------------*/
/** RENDER TO DOM **/
ReactDOM.render(
    <AppContainer/>,
    document.getElementById('AppContainer')
);
/*------------------------------------------------------------------------------------*/
/*///*/

https://github.com/aredfox/electron-starter/blob/master/src/views/app.ts

快速链接

• Git repo:https://github.com/aredfox/electron-starter
  • app.ts文件https://github.com/aredfox/electron-starter/blob/master/src/views/app.ts
  • AppContainer.tsx文件https://github.com/aredfox/electron-starter/blob/master/src/views/components/AppContainer.tsx

Answer 1

您不能在具有扩展名的文件中使用jsx/ tsxsyntax ts.

您可以将文件重命名为app.tsx,也可以使用React.createElement:

ReactDOM.render(
    React.createElement(AppContainer),
    document.getElementById('AppContainer')
);