TypeScript和ReactDOM.render方法不接受组件 [英] TypeScript and ReactDOM.render method doesn't accept component

问题描述

我正在使用TypeScript和React.我已经定义了AppContainer.tsx组件，并将其导出为默认组件.我在文件app.ts中使用了此文件，其中ReactDOM用于将其呈现为目标dom元素.但是在那里，我收到以下错误(见图). 阅读下面的详细信息和指向GitHub存储库的链接.

I'm using TypeScript and React. I've defined my AppContainer.tsx component, exported it as default. I'm consuming this in the file app.ts where ReactDOM lives to render it to the targetted dom element. But there I receive the following errors (see image). Read below for more information and links to GitHub repo.

问题:我在做什么或在解释错误?从所有代码示例中，我已经看到这应该可行-但也许(显然)我缺少了一些东西. 以下是更多信息，并链接到完整的GitHub存储库.

Question: What am I doing, or interpreting, wrong? From all code examples I've seen this should work - but maybe (clearly) I'm missing something. Below is more info and links to the full GitHub repo.

• 反应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

• react 15.4.2
• react-dom 15.4.2
• typings: https://github.com/aredfox/electron-starter/blob/master/typings.json
• tsconfig: https://github.com/aredfox/electron-starter/blob/master/tsconfig.json

/// <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/电子启动器/blob/master/src/views/app.ts

• Git回购: https://github.com/aredfox/electron-starter
  • app.ts文件 https://github.com. 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
  • Git repo: https://github.com/aredfox/electron-starter
    • app.ts file https://github.com/aredfox/electron-starter/blob/master/src/views/app.ts
    • AppContainer.tsx file https://github.com/aredfox/electron-starter/blob/master/src/views/components/AppContainer.tsx

    推荐答案

    您不能在扩展名为ts的文件内使用jsx/tsx语法.

    You can't use jsx/tsx syntax inside files which have ts extension.

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

    You can either rename your file to app.tsx, or you can use React.createElement:

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

    这篇关于TypeScript和ReactDOM.render方法不接受组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！