Как я могу преобразовать мои.tsx файлы в синтаксис.jsx, ожидаемый ReactJS.NET?

Question

Я использую ReactJS.NET. Я могу заставить демонстрацию React.Sample.Webpack работать, но я хочу изменить ее, чтобы использовать TypeScript.

Окончательная ошибка выбрасывается из @Html.React("Components.Temp", new { }) HTML помощник в Index.cshtml, Вот сообщение об ошибке:

Ошибка при отображении "Components.Temp" в "act_3FYDPtcTMkKrddTO7ozOCA": Сценарий выдал исключение: недопустимый тип элемента: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: объект.

Эта проблема

Файлы.jsx, используемые в демонстрационном проекте, заканчиваются следующими утверждениями:

module.exports = Avatar; // From Avatar.jsx
module.exports = Comment; // From Comment.jsx
module.exports = CommentsBox; // From CommentsBox.jsx

Обратите внимание на использование module.exports, Код, сгенерированный tsc, имеет это вместо:

exports.default = Temp; // From Temp.jsx
exports.default = TempImport; // From TempImport.jsx

Кроме того, в сгенерированных tsc файлах.jsx импортированные компоненты имеют default Имущество добавлено к ним. От Temp.jsx файл ниже:

render() {
    return (<TempImport_1.default />);
}

Обратите внимание на default добавлен в TempImport_1

Если я вручную изменю сгенерированные tsc файлы.jsx для использования modules.export = Temp а также <TempImport />, все работает.

Вопросы)

1. Как я могу создать файл.jsx, который может быть использован помощником ReactJS.NET Html?
2. Есть ли настройки в tsconfig.json за это?
3. Есть ли погрузчики, к которым я могу добавить webpack.config.js что позаботится об этом?

Правки

Если я удалю export default из определения класса в файле.tsx и вручную добавить module.exports = ComponentName в конце, полученный файл.jsx имеет module.exports также. Тем не мение, default все еще добавляется в конец всех импортируемых компонентов. Смотрите код "Попытка 2" в конце этого поста.

Соответствующие файлы

TempImport.tsx

import * as React from "react";

export default class TempImport extends React.Component<undefined, undefined> {
    render() {
        return (<h1>Temp Import</h1>);
    }
}

Temp.tsx

import * as React from "react";
import TempImport from "./TempImport";

export default class Temp extends React.Component<undefined, undefined> {
    render() {
        return (<TempImport />);
    }
}

tsconfig.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "jsx": "preserve",
        "module": "commonjs",
        "noImplicitAny": true,
        "outDir": "./Content/components",
        "sourceMap": true,
        "target": "es6"
    },
    "include": [
        "./src/**/*"
    ]
}

TempImport.jsx (Генерируется tsc)

const React = require("react");
class TempImport extends React.Component {
    render() {
        return (<h1>Temp Import</h1>);
    }
}
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = TempImport;

Temp.jsx (Создано tsc)

const React = require("react");
const TempImport_1 = require("./TempImport");
class Temp extends React.Component {
    render() {
        return (<TempImport_1.default />);
    }
}
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Temp;

webpack.config.js

var path = require("path");

module.exports = {
    context: path.join(__dirname, "Content"),
    entry: {
        server: "./server",
        client: "./client"
    },
    output: {
        path: path.join(__dirname, "build"),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loaders: ["babel-loader"],
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".ts", ".tsx"]
    },
    externals: {
        react: "React"
    }
};

Temp.tsx (Попытка 2)

Обратите внимание, что я удалил export default и добавил module.exports = Temp

import * as React from "react";
import TempImport from "./TempImport";

class Temp extends React.Component<undefined, undefined> {
    render() {
        return (<TempImport />);
    }
}

module.exports = Temp;

Temp.jsx (Попытка 2 - генерируется tsc)

Обратите внимание, что теперь module.exports = Temp внизу, но <TempImport_1 все еще имеет default добавлен к нему.

const React = require("react");
const TempImport_1 = require("./TempImport");
class Temp extends React.Component {
    render() {
        return (<TempImport_1.default />);
    }
}
module.exports = Temp;