Reagieren und Bootstrap: Komponente nicht Rendering

Ich versuche, einfache Bootstrap-Komponenten mit reagieren.Reagieren und Bootstrap: Komponente nicht Rendering

Dies ist index.html:

<!doctype html> 
 
<html> 
 
<head> 
 
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
 
    <script src="js/bootstrap.js"></script> 
 
    <script src="js/react/react.js"></script> 
 
    <script src="js/react/react-dom.js"></script> 
 
    <script src="js/browser.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>To Do List</title> 
 
    <link href="css/bootstrap.css" rel="stylesheet"> 
 
</head> 
 
    
 
<body> 
 
    <div class="container" id="headContainer"> 
 
     <div class="row"> 
 
      <div class="col-sm-1"> 
 
       <img src="Panter.jpg" class="img-responsive"> 
 
\t  </div> 
 
      <div class="col-sm-8"> 
 
       <h1 style="color:Pink">To do, to do, to doooo</h1> 
 
      </div> 
 
     </div> 
 
\t <div id="list"> 
 
\t  
 
\t </div> 
 
    </div> \t 
 
\t <script type="text/babel" src="js/app.js" ></script> 
 
</body> 
 
</html>

Dies ist app.js:

var ListOfActionsRendering=React.createClass({ 
 
    render: function() { 
 
\t return (\t \t  
 
\t  <div class="accordion" id="listOfActions"> 
 
\t \t <div class="accordion-group"> 
 
\t \t  <div class="row"> 
 
\t \t \t  <div class="col-sm-2"> 
 
\t \t \t \t  <a class="accordion-toggle" data-toggle="collapse" data-parent="#listOfActions" href="#defaultList"> 
 
\t \t    <h4 id="nameOfGroup"> Основной список </h4> 
 
\t \t    </a> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-sm-2"> 
 
\t \t \t \t  <div class="btn-group"> 
 
\t \t    <button class="btn" onclick="onEditListOfActionClick()"><i class="glyphicon glyphicon-pencil"></i></button> 
 
\t \t    <button class="btn"><i class="glyphicon glyphicon-remove"></i></button> 
 
\t \t    </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t  
 
\t \t  <div class="accordion-body collapse in" id="defaultList"> 
 
\t    <div class="accordion-inner"> 
 
\t     <a href="#defaultList"> 
 
\t \t     <h5> </h5> 
 
\t     </a> 
 
\t \t   </div> 
 
\t   </div> 
 
\t \t </div> 
 
\t \t   
 
     ); 
 
    } 
 
}); 
 

 
ReactDOM.render (
 
    <ListOfActionsRendering />, 
 
    document.getElementById("list") 
 
);

Ich habe keine Fehler in Chrom consol e, aber Komponenten sind nicht gezeigt.

In snipper habe ich einen Fehler:

Nachricht: Uncaught Syntaxerror: unerwartetes Token <, Dateiname: http://stacksnippets.net/js, lineno: 16, colno: 6

Quelle

2017-05-12 Olga

In JSX, ändern Sie einfach class=""-className="":

var ListOfActionsRendering=React.createClass({ 
    render: function() { 
     return (   
     <div className="accordion" id="listOfActions"> 
      <div className="accordion-group"> 
       <div className="row"> 
       <div className="col-sm-2"> 
        <a className="accordion-toggle" data-toggle="collapse" data-parent="#listOfActions" href="#defaultList"> 
         <h4 id="nameOfGroup"> Основной список </h4> 
        </a> 
       </div> 

       <div className="col-sm-2"> 
        <div className="btn-group"> 
         <button className="btn" onclick="onEditListOfActionClick()"><i className="glyphicon glyphicon-pencil"></i></button> 
         <button className="btn"><i className="glyphicon glyphicon-remove"></i></button> 
        </div> 
       </div> 
       </div> 
      </div> 

      <div className="accordion-body collapse in" id="defaultList"> 
       <div className="accordion-inner"> 
        <a href="#defaultList"> 
         <h5> </h5> 
        </a> 
       </div> 
      </div> 
     </div> 

     ); 
    } 
});

Quelle

2017-05-12 06:42:25 thinhvo0108

danke für wichtige Nachricht! – Olga

Gern geschehen, wenn Sie meinen, dass meine Antwort nützlich ist, denken Sie bitte auch an eine Abstimmung, danke! Wenn Sie weitere Probleme mit reactjs haben, können Sie mir Bescheid geben, ich werde versuchen zu helfen, wenn ich kann! – thinhvo0108

Sie müssen babel standalone Skript enthalten, zu

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

überprüfen Sie das Arbeitsbeispiel: transcompile den Code, dieses Skript in Abschnitt Kopf verwenden

<!doctype html> 
 
<html> 
 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>To Do List</title> 
 
    <link href="css/bootstrap.css" rel="stylesheet"> 
 
</head> 
 
    
 
<body> 
 
    <div class="container" id="headContainer"> 
 
     <div class="row"> 
 
      <div class="col-sm-1"> 
 
       <img src="Panter.jpg" class="img-responsive"> 
 
\t  </div> 
 
      <div class="col-sm-8"> 
 
       <h1 style="color:Pink">To do, to do, to doooo</h1> 
 
      </div> 
 
     </div> 
 
\t <div id="list"> 
 
\t  
 
\t </div> 
 
    </div> \t 
 
    <script type="text/babel" > 
 
     var App = React.createClass({ 
 
      render: function(){ 
 
      return <p>Hello</p>   
 
      } 
 
     }) 
 
     ReactDOM.render(<App/>, document.getElementById('list')) 
 
    </script> 
 
</body> 
 
</html>

Quelle

2017-05-12 06:35:22

es Ihnen danken! es funktioniert – Olga

Reagieren und Bootstrap: Komponente nicht Rendering

Antwort

Verwandte Themen