Einzelne Komponente auf verschiedenen Seiten reagieren ASP.NET

Ich bin neu in Reactjs. Ich benutze derzeit keinen Transpiler wie Babel, noch verwende ich ein Build-System wie Webpack. Ich bin in Visual Studio und verwenden Web Compiler-Erweiterung, um JSX in JS zu kompilieren. Hier ist mein Code am _Layout.cshtml:Einzelne Komponente auf verschiedenen Seiten reagieren ASP.NET

<!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>

Und in dieser Datei, ich bin mit zwei Komponenten:

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'));

Ich habe 2 Seiten, ist Index.cshtml wo Ich zeige <MainComponent /> und eine andere Seite Try.cshtml, wo ich <AccordionComponent /> verwenden möchte. Aber wenn ich versuche, zu Try.cshtml zu navigieren, bekomme ich den Fehler target container is not a dom element im Browser ???

Wo mache ich etwas falsch? Soll ich React Router verwenden? Jede Hilfe wird geschätzt.

Quelle

2016-08-20 Janshair Khan

Sie sollten ein Element mit id = 'accordionexample' in allen HTML-Seiten haben, wo die React-Komponente geladen ist. z.B. <div id="accordionexample"></div>.

Quelle

2016-08-20 16:25:04

Was ist, wenn ich eine Komponente auf einer Seite und eine zweite Komponente auf einer anderen Seite laden möchte, wenn ich '

' auf beiden Seiten verwende? Wie soll ich das machen? –

In diesem Fall sollten Sie ReactDOM.render (...) aufrufen. mit verschiedenen Parametern in verschiedenen Seiten, oder um es nur aufzurufen, wenn das Element div auf der aktuellen Seite existiert. –

Wie kann ich das machen? Kannst du bitte deinen Code ändern und wenn möglich das praktische Beispiel zeigen? Ich denke, dass verschiedene Parameter und Rendering verschiedene Komponenten basierend auf den Parametern gut aussehen. Können Sie bitte ein Beispiel zeigen oder einen Link zu? –

Einzelne Komponente auf verschiedenen Seiten reagieren ASP.NET

Antwort

Verwandte Themen