代码之家 › 专栏 › 技术社区 › Sujit.Warrier

未定义组件

asp.net-core reactjs asp.net

Sujit.Warrier · 技术社区 · 9 年前

tutorial 设置项目。我正在尝试构建和使用我的第一个组件。唯一不同的是我使用了ES6脚本,而不是教程中显示的旧语法。这是我的密码。

启动。反恐精英

    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?}");
        });
    }

视图/u Viewimports。chtml

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

 @{
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/教程。jsx公司

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

   }

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

问题是我得到了错误“未捕获引用错误:组件未定义”。如果我在教程中尝试导入React和ReactDOM。jsx I收到错误“未捕获的语法错误:意外的令牌导入”

1 回复 | 直到 9 年前

Elumalai Kaliyaperumal 9 年前

在代码中,“组件”应定义为“React”。组件'

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

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