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

IT技术 reactjs typescript typescript-typings react-dom tsx
2021-05-16 12:09:50

TL; 博士

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

在此处输入图片说明

问题:我在做什么或解释错了什么?从我见过的所有代码示例中,这应该可行 - 但也许(显然)我遗漏了一些东西。以下是完整 GitHub 存储库的更多信息和链接


环境

代码

文件'/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

快速链接

1个回答

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

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

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