加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 20:17:06 所属栏目:百科 来源:网络整理
导读:TL; DR 我正在使用TypeScript和React.我已经定义了我的AppContainer.tsx组件,将其导出为默认值.我正在使用ReactDOM所在的文件app.ts中将其渲染到目标dom元素.但我收到以下错误(见图).有关更多信息和GitHub repo的链接,请阅读以下内容. 问题:我在做什么或者
TL; DR

我正在使用TypeScript和React.我已经定义了我的AppContainer.tsx组件,将其导出为默认值.我正在使用ReactDOM所在的文件app.ts中将其渲染到目标dom元素.但我收到以下错误(见图).有关更多信息和GitHub repo的链接,请阅读以下内容.

enter image description here

问题:我在做什么或者解释是什么?从所有代码示例我看到这应该工作 – 但也许(显然)我错过了一些东西.以下是更多信息和完整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

解决方法

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

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读