1

我正在使用ReactJS.NET。我可以让React.Sample.Webpack演示工作，但我想修改它以使用 TypeScript。

@Html.React("Components.Temp", new { })最终错误是从Index.cshtml. 这是错误消息：

将“Components.Temp”渲染为“react_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 = Tempand <TempImport />，一切正常。

问题

  1. 如何生成可由 ReactJS.NET Html 帮助程序使用的 .jsx 文件？
  2. 有这个设置tsconfig.json吗？
  3. 有没有我可以添加的加载器来解决webpack.config.js这个问题？

编辑

如果我export default从 .tsx 文件中的类定义中删除并module.exports = ComponentName在最后手动添加，则生成的 .jsx 文件也有module.exports。但是，default仍然添加到所有导入组件的末尾。请参阅本文末尾的“尝试 2”代码。

相关文件

临时导入.tsx

import * as React from "react";

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

临时文件

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;
4

0 回答 0