Reagieren Komponente nicht in Play App zerreißend

ich ein Play/scala/sbt Projekt mit folgenden Reagieren Komponente bei app/assets/javascripts/nav.jsx gespeichert:Reagieren Komponente nicht in Play App zerreißend

class Nav extends React.Component { 
    constructor() { 
     super(); 
    } 
    render() { 
     return (
      <nav class="navbar navbar-default"> 
       <div class="container-fluid"> 
        <div class="navbar-header"> 
         <a class="navbar-brand" href="@routes.MainViewController.index" id="logo">@Messages("application.banner")</a> 
        </div> 
        <div class="collapse navbar-collapse"> 
         <ul class="nav navbar-nav"> 
          <li class="active"><a href="@routes.MainViewController.index">@Messages("application.home")</a></li> 
          <li><a href="@routes.MainViewController.about">@Messages("application.about")</a></li> 
          <li><a href="#">Test</a></li> 
          <li><a href="#">Test</a></li> 
         </ul> 
        </div> 
       </div> 
      </nav> 
     ); 
    } 
} 
ReactDOM.render(
    <Nav />, 
    document.getElementById('nav') 
);

In meiner main.scala.html Datei:

@(title: String)(body: Html)(webJarAssets: WebJarAssets)(implicit messages: Messages) 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     @* Here's where we render the page title `String`. *@ 
     <title>@title</title> 

     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <script src="@routes.MainJsonController.javascriptRoutes" type="text/javascript"></script> 

     <link rel="stylesheet" href='@routes.WebJarAssets.at(webJarAssets.locate("css/bootstrap.min.css"))'> 
     <link rel="stylesheet" href='@routes.WebJarAssets.at(webJarAssets.locate("css/bootstrap-theme.min.css"))'> 
     <link rel="stylesheet" href='@routes.WebJarAssets.at(webJarAssets.locate("css/font-awesome.min.css"))'> 
     <script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("jquery.min.js"))'></script> 
     <script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("js/bootstrap.min.js"))'></script> 
     <script type="text/javascript" src='@routes.WebJarAssets.at(webJarAssets.locate("react.js"))'></script> 
     <script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("react-bootstrap.min.js"))'></script> 
     <script type="text/javascript" src='@routes.WebJarAssets.at(webJarAssets.locate("react-dom.js"))'></script> 

    </head> 
    <body> 
      <div class="container"> 

      <div id="nav"></div> 

       <div class="container-fluid"> 
        <div class="row"> 
         <div class="col-md-10"> 
         @body 
         </div> 
        </div> 
       </div> 
      </div> 
    </body> 
</html>

Also, meine Navigation Bar erscheint nicht. Ich habe erwartet, dass die Komponente bei <div id="nav"></div> rendert. Was könnte ich falsch machen?

Asset-Route

GET  /assets/*file    controllers.Assets.versioned(path="/public", file: Asset)

Ich fühle mich wie ich die Komponente als Skript enthalten müssen:

<script type="text/javascript" src='@routes.Assets.versioned("/javascripts/nav.jsx")'></script>

Dies macht die ganze Seite ohne Kompilierungsfehlern aber die Komponente doesn noch‘ t erscheinen.

Ich bekam eine Ausnahme in Zeile 7, wo die erste <nav> Tag beginnt.

Uncaught SyntaxError: Unexpected token <

Wenn ich korrigiert die sind zu <script type="text/javascript" src='@routes.Assets.versioned("javascripts/nav.js")'></script> und legte sie direkt unter meinem Abschluss </body> Tag, ich das jetzt bekommen:

Uncaught Error: _registerComponent(...): Target container is not a DOM element. 
    at invariant (react.js:18354) 
    at Object._registerComponent (react.js:11047) 
    at Object._renderNewRootComponent (react.js:11070) 
    at Object.wrapper [as _renderNewRootComponent] (react.js:12353) 
    at Object._renderSubtreeIntoContainer (react.js:11150) 
    at Object.render (react.js:11170) 
    at Object.wrapper [as render] (react.js:12353) 
    at nav.js:25

Quelle

2017-03-16 santafebound

Ich glaube nicht, dass das Spiel Ihre reagierenden Komponenten oder etwas Ähnliches kompiliert. Ich reagiere jetzt nicht, sondern muss die Skripte im 'Assets'-Ordner auf den Vorlagen verlinken, um sie verwenden zu können. – pedroct92

Schauen Sie sich hier an, es gibt Ihnen vielleicht eine konkretere Hilfe: [link] (http://matthiasnehlsen.com/blog/2014/01/05/play-framework-and-facebooks-react-library/) – pedroct92

ich folgende Änderungen vorgenommen:

Einfügen eines Schrägstrichs am Anfang des Pfads, dh /javascripts anstelle von javascripts
ersetzt .jsx mit .js
am Boden meines Skripts Setzen der .scala Vorlage, direkt vor meinem Schließkörper-Tag, statt in meinem <head>

Ergebnis:

<script type="text/javascript" src='@routes.Assets.versioned("/javascripts/nav.js")'></script>

Schließlich , meine Navigationsleiste wurde korrekt gerendert.

Quelle

2017-03-16 18:50:18 santafebound

Reagieren Komponente nicht in Play App zerreißend

Antwort

Verwandte Themen