反应和引导：组件不渲染答案

【问题标题】：React and bootstrap: component not rendering反应和引导：组件不渲染
【发布时间】：2017-10-11 08:36:28
【问题描述】：

我正在尝试使用 react 渲染简单的引导组件。

这是 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">
	      </div>
          <div class="col-sm-8">
               <h1 style="color:Pink">To do, to do, to doooo</h1>
          </div>
       </div> 
	   <div id="list">
	      
	   </div>
    </div>	
	<script type="text/babel" src="js/app.js" ></script>
 </body>
</html>

这是 app.js：

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

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

我在 chrome 控制台中没有任何错误，但未显示组件。

在 snipper 中我有一个错误：

消息：未捕获的语法错误：意外的令牌 http://stacksnippets.net/js, 线号：16，科诺：6

【问题讨论】：

标签： javascript html twitter-bootstrap reactjs

【解决方案1】：

您需要包含babel standalone 脚本，要转译代码，请在head 部分使用此脚本：

<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">
	      </div>
          <div class="col-sm-8">
               <h1 style="color:Pink">To do, to do, to doooo</h1>
          </div>
       </div> 
	   <div id="list">
	      
	   </div>
    </div>	
    <script type="text/babel" >
        var App = React.createClass({
           render: function(){
             return <p>Hello</p>          
           }
        })
        ReactDOM.render(<App/>, document.getElementById('list'))
   </script>
 </body>
</html>

【讨论】：

【解决方案2】：

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

        );
   }
});

【讨论】：

不客气，如果您认为我的回答有用，也请考虑投票，谢谢！如果您对 reactjs 有进一步的问题，可以告诉我，如果可以，我会尽力提供帮助！