未定义组件答案

【问题标题】：Component not defined未定义组件
【发布时间】：2017-09-28 00:35:00
【问题描述】：

所以我想用 react js 建立一个 asp.net core 1.0 项目。我按照以下tutorial 设置项目。我正在尝试构建和使用我的第一个组件。我所做的唯一区别是我使用了 ES6 脚本，而不是教程中显示的旧语法。这是我的代码。

Startup.cs

    public void ConfigureServices(IServiceCollection services)
    {
        // Add framework services.
        services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
        services.AddReact();
        services.AddMvc();
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseBrowserLink();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }
        app.UseReact(config =>
        {
            // If you want to use server-side rendering of React components,
            // add all the necessary JavaScript files here. This includes
            // your components as well as all of their dependencies.
            // See http://reactjs.net/ for more information. Example:
            //config
            //  .AddScript("~/Scripts/First.jsx")
            //  .AddScript("~/Scripts/Second.jsx");

            // If you use an external build too (for example, Babel, Webpack,
            // Browserify or Gulp), you can improve performance by disabling
            // ReactJS.NET's version of Babel and loading the pre-transpiled
            // scripts. Example:
            //config
            //  .SetLoadBabel(false)
            //  .AddScriptWithoutTransform("~/Scripts/bundle.server.js");
        });
        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });
    }

视图/_Viewimports.chtml

   @using ReactTest
   @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
   @using React.AspNet

首页/Index.cshtml

 @{
Layout = null;
 }
<html>
<head>
    <title>Hello React</title>
</head>
<body>
<div id="content"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="@Url.Content("~/js/tutorial.jsx")"></script>
</body>
</html>

/js/tutorial.jsx

class App extends Component {
    render() {
       return (<div>test</div>);

   }

}
ReactDOM.render(<App/>,document.getElementById('content'));

问题是我收到错误“未捕获的 ReferenceError：未定义组件”。如果我尝试在 tutorial.jsx 中导入 React 和 ReactDOM，我会收到错误“Uncaught SyntaxError: Unexpected token import”

【问题讨论】：

标签： asp.net reactjs asp.net-core

【解决方案1】：

在您的代码中，“组件”应定义为“React.Component”

class App extends React.Component {
   render() {
       return (<div>test</div>);
   }
}

ReactDOM.render(<App/>, document.getElementById('content'));

【讨论】：

有时尝试这样做：import React, { Component } from 'react';