反應和引導：組件不呈現

我試圖呈現簡單的引導組件使用反應。反應和引導：組件不呈現

這是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>

這是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") 
 
);

我沒有在Chrome CONSOL任何錯誤e，但組件未顯示。

在剪斷我有一個錯誤：

消息：未捕獲的SyntaxError：意外的標記<，文件名：http://stacksnippets.net/js， LINENO：16， colno：6

來源

2017-05-12 Olga

在JSX，只需更改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> 

     ); 
    } 
});

來源

2017-05-12 06:42:25 thinhvo0108

感謝您的重要通知！ – Olga

不客氣，如果你認爲我的回答很有用，請考慮加倍投票，謝謝！如果你有進一步的反應問題，你可以告訴我，如果可以的話，我會盡力幫忙！ – thinhvo0108

您需要包括babel standalone腳本，以反編譯代碼，在頭部使用以下腳本：

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

檢查工作示例：

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

來源

2017-05-12 06:35:22

謝謝！它的工作原理 – Olga

反應和引導：組件不呈現

回答

相關問題