TypeScript 和 ReactDOM.render 方法不接受组件
TypeScript and ReactDOM.render method doesn't accept component
TL;DR
我正在使用 TypeScript 和 React。我已经定义了我的 AppContainer.tsx
组件,并将其导出为默认值。我在文件 app.ts
中使用它,其中 ReactDOM
将其渲染到目标 dom 元素。但是我收到以下错误(见图)。 阅读下文了解更多信息和指向 GitHub 存储库的链接。
问题:我在做什么或解释错了什么?从我看到的所有代码示例中,这应该可行——但也许(显然)我遗漏了一些东西。 下面是更多信息和完整 GitHub 存储库的链接。
环境
- 反应 15.4.2
- 反应-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
快速链接
您不能在扩展名为 ts
的文件中使用 jsx
/tsx
语法。
您可以将文件重命名为 app.tsx
,也可以使用 React.createElement:
ReactDOM.render(
React.createElement(AppContainer),
document.getElementById('AppContainer')
);
TL;DR
我正在使用 TypeScript 和 React。我已经定义了我的 AppContainer.tsx
组件,并将其导出为默认值。我在文件 app.ts
中使用它,其中 ReactDOM
将其渲染到目标 dom 元素。但是我收到以下错误(见图)。 阅读下文了解更多信息和指向 GitHub 存储库的链接。
问题:我在做什么或解释错了什么?从我看到的所有代码示例中,这应该可行——但也许(显然)我遗漏了一些东西。 下面是更多信息和完整 GitHub 存储库的链接。
环境
- 反应 15.4.2
- 反应-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
快速链接
您不能在扩展名为 ts
的文件中使用 jsx
/tsx
语法。
您可以将文件重命名为 app.tsx
,也可以使用 React.createElement:
ReactDOM.render(
React.createElement(AppContainer),
document.getElementById('AppContainer')
);