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

Question

TL; DR

我正在使用TypeScript和React。我已定义了我的AppContainer.tsx组件，将其导出为默认值。我在文件app.ts中使用了ReactDOM，以将其呈现给目标dom元素。但我收到以下错误（见图）。 请阅读以下内容以获取更多信息以及指向GitHub回购的链接。

问题：我在做什么，或者在解释，错了？从所有代码示例中我都看到这应该有用 - 但也许（显然）我错过了一些东西。 以下是更多信息和指向完整GitHub回购的链接。

环境

• 反应15.4.2
• react-dom 15.4.2
• typings：https://github.com/aredfox/electron-starter/blob/master/typings.json
• tsconfig：https://github.com/aredfox/electron-starter/blob/master/tsconfig.json

代码

File＆＃39; /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

文件＆＃39; app.ts＆＃39;

/// <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回购：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扩展名的文件中使用tsx / ts语法。

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

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