web-dev-qa-db-ja.com

TypeScriptおよびReactDOM.renderメソッドはコンポーネントを受け入れません

TL; DR

TypeScriptとReactを使用しています。 AppContainer.tsxコンポーネントを定義し、デフォルトとしてエクスポートしました。これをファイルapp.tsで使用しています。ここでReactDOMは、ターゲットのdom要素にレンダリングするために存在します。しかし、そこで私は以下のエラーを受け取ります（画像を参照）。 GitHubリポジトリの詳細とリンクについては、以下をお読みください。

enter image description here

質問：私は何をしているのか、または解釈しているのか、間違っていますか？私が見たすべてのコード例から、これは機能するはずですが、おそらく（明らかに）何かが足りません。 以下は、完全なGitHubリポジトリへの詳細とリンクです。

環境

コード

ファイル '/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

クイックリンク

reactjstypescripttypescript-typingsreact-domtsx
9
Yves Schelpe

拡張子がjsxのファイル内でtsx/ts構文を使用することはできません。

ファイルの名前をapp.tsxに変更するか、 React.createElement ：を使用できます。

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