Question

所以我想用react js建立一个asp.net核心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'));

问题是我收到错误'Uncaught ReferenceError：Component not defined'。如果我尝试在tutorial.jsx中导入React和ReactDOM，我会收到错误'Uncaught SyntaxError：Unexpected token import'

Answer 1

在您的代码＆＃39;组件＆＃39;应定义为“React.Component＆＃39;

”

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

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

组件未定义

1 个答案: