Question

我是Reactjs的新手。我目前没有使用像Babel这样的任何转发器，也没有使用像Webpack这样的构建系统。我在Visual Studio上使用Web Compiler扩展将JSX编译成JS。这是我在_Layout.cshtml的代码：

<!DOCTYPE html>

<html>
 <head>
   <meta name="viewport" content="width=device-width" />
   <title>@ViewBag.Title</title>
    <link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/css/site.min.css" rel="stylesheet" />
 </head>
 <body>
   <div id="root">
      @RenderBody()
   </div>
   <script src="~/lib/jquery/dist/jquery.min.js"></script>
   <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="~/lib/react/react.js"></script>
   <script src="~/lib/react/react-dom.js"></script>
   <script src="~/js/jsx.min.js"></script> <!--Here is my react compiled JSX file-->
  </body>

在此文件中，我使用了两个组件：

var MainComponent = React.createClass({
  render: function () {
    return <div id="Mainaccordion" className="panel-group" role="tablist" aria-multiselectable="true">
                <Level1Component title=".NET Core" parentAccordion="Mainaccordion" collapseTarget="dotnet" heading="dotnet">
            ...............
            ...............
            ...............
            </div>;
    }
});

var AccordionComponent = React.createClass({
   render: function () {
      return <div><h2>Hello</h2></div>
   }
});

ReactDOM.render(<MainComponent />, document.getElementById('accordionexample'));

我有2个页面，一个是Index.cshtml，其中我显示<MainComponent />，另一个页面是Try.cshtml，我想使用<AccordionComponent />。但是当我尝试导航到Try.cshtml时，我在浏览器中收到错误target container is not a dom element ???

我做错了什么？我应该使用React Router吗？任何帮助将不胜感激。

Answer 1

在加载React组件的所有HTML页面中，您应该有一个id ='accordionexample'的元素。例如frmACCOUNTS。

在不同的页面上反映单个组件ASP.NET

1 个答案: