小编典典

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

reactjs

TL; DR

我正在使用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

快速链接


阅读 321

收藏
2020-07-22

共1个答案

小编典典

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

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

ReactDOM.render(
    React.createElement(AppContainer),
    document.getElementById('AppContainer')
);
2020-07-22