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

Posted 2023-02-21

【中文标题】TypeScript 和 ReactDOM.render 方法不接受组件

【英文标题】：TypeScript and ReactDOM.render method doesn't accept component

【发布时间】：2017-06-13 08:07:30

【问题描述】：

TL;DR

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

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

---

环境

反应 15.4.2 react-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

【参考方案1】：

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

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

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

【讨论】：

添加到这个... tsx 编译为 jsx，然后编译为 js，而 .ts 编译为 .js。您的 tsconfig.json 还应该有一个属性 "jsx": "react"。

非常感谢！这确实是我一直在寻找的......我到底怎么能忽视这个......

我花了 2 小时弄清楚这一点。非常感谢！