我正在使用TypeScript和React。我已经定义了AppContainer.tsx组件,并将其导出为默认组件。我正在文件app.ts中使用ReactDOM它,将其渲染为目标dom元素。但是在那里,我收到以下错误(见图)。 请阅读以下内容以获取更多信息和GitHub存储库的链接。
AppContainer.tsx
app.ts
ReactDOM
问题: 我在做什么或在解释错误?从所有代码示例中,我已经看到这应该可行-但也许(显然)我缺少了一些东西。 以下是更多信息以及指向完整GitHub存储库的链接 。
/// <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
/// <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
您不能在具有扩展名的文件中使用jsx/ tsx语法ts。
jsx
tsx
ts
您可以将文件重命名为app.tsx,也可以使用React.createElement:
app.tsx
ReactDOM.render( React.createElement(AppContainer), document.getElementById('AppContainer') );