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

Question

TL;DR

我正在使用 TypeScript 和 React。我已经定义了我的 AppContainer.tsx 组件，并将其导出为默认值。我在文件 app.ts 中使用它，其中 ReactDOM 将其渲染到目标 dom 元素。但是我收到以下错误（见图）。 阅读下文了解更多信息和指向 GitHub 存储库的链接。

问题：我在做什么或解释错了什么？从我看到的所有代码示例中，这应该可行——但也许（显然）我遗漏了一些东西。 下面是更多信息和完整 GitHub 存储库的链接。

---

环境

• 反应 15.4.2
• 反应-dom 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 回购：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

您不能在扩展名为 ts 的文件中使用 jsx/tsx 语法。

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

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