Question

我正在尝试构建一个最小的工作示例，以便在Visual Studio 2015中使用https://maps.googleapis.com/maps/api/place/photo?photoreference=ENTER_PHOTO_REF_HERE&key=YOUR_API_KEY和ReactJS。

在完成大多数教程后，发现它们中没有任何内容正在发挥作用，而其中没有任何内容完全针对我的需求。

我想将组件编写为TypeScript文件，以保证类型安全，并重用已编写的现有类，定义和接口。

这些内容应转换为.tsx，以便在cshtml中启用.jsx。

根据我的project-config，我得到的错误是需要的不是函数或意外的toke＆lt;在SomeCompnent.tsx。

稍后，还应该可以使用ReactJS.NET的服务器端呈现来提高性能/用户体验。

我是否缺少任何描述如何从头开始使用TypeScript，ReactJS，Visual Studio 2015，MVC5的教程？

这些是我项目属性的React.render(<SomeComponent />, document.getElementById("content"))标签中的设置：

TypeScript Build

这是我的<TypeScriptTarget>ES5</TypeScriptTarget> <TypeScriptJSXEmit>React</TypeScriptJSXEmit> <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled> <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny> <TypeScriptModuleKind>CommonJS</TypeScriptModuleKind> <TypeScriptRemoveComments>False</TypeScriptRemoveComments> <TypeScriptOutFile /> <TypeScriptOutDir /> <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations> <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError> <TypeScriptSourceMap>True</TypeScriptSourceMap> <TypeScriptMapRoot /> <TypeScriptSourceRoot />

的内容

SomeComponent.tsx

我的App.ts：

import * as React from "react";
import * as ReactDOM from "react-dom";

interface IProps {
    name:string
}

class SomeComponent extends React.Component<IProps, undefined> {
    render() {
        return <div>Say hello to {this.props.name}</div>;
    }
}

export function render(componentName:string, mountNode: HTMLElement) {
    ReactDOM.render(<SomeComponent name={componentName} />, mountNode);
}

转换为App.js：

import * as ReactDOM from "react-dom";
import {render} from "./Components/SomeComponent";

render("some name", document.getElementById("content"));

Index.cshtml只是：

"use strict";
var SomeComponent_1 = require("./Components/SomeComponent");
SomeComponent_1.render("some name", document.getElementById("content"));
//# sourceMappingURL=App.js.map

最后但并非最不重要的是package.json

<body>
    <div>
        <div id="content"></div>
    </div>
    <script src="~/Scripts/App.js"></script>
</body>

Answer 1

此设置有效（我不使用VS，但您可以理解）：

tsconfig.json

{
    "compilerOptions": {
        "jsx": "react",
        "module": "commonjs"
    }
}

（您可以选择其他模块系统）

page.ts

import { render } from "./main";
render("how are you?", document.getElementById("content"));

main.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Prompt } from "./prompt";

class HelloWorld extends React.Component<{ prompt: string }, void> {
    render() {
        return <div>Hello world><Prompt value={ this.props.prompt } /></div>;
    }
}

export function render(prompt: string, mount: HTMLElement) {
    ReactDOM.render(<HelloWorld prompt={ prompt }/>, mount);
}

prompt.tsx

import * as React from "react";

export class Prompt extends React.Component<{ value: string }, void> {
    render() {
        return <span>{ this.props.value }</span>;
    }
}

你需要确保你有反应包：

npm install --save react react-dom @types/react @types/react-dom

在Visual Studio，MVC5项目中将ReactJS与TypeScript一起使用

1 个答案: