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

Question

TL;博士

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

问题：我在做什么或解释错了什么？从我看到的所有代码示例中，这应该可以工作-但也许（显然）我遗漏了一些东西。下面是更多信息和完整 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 仓库：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/语法。tsxts

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

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