Question

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

这是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中我有一个错误：

消息：未捕获的SyntaxError：意外的标记＆lt;，文件名：http://stacksnippets.net/js， lineno：16， colno：6

Answer 1

您需要包含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">
	      </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>

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

        );
   }
});

React和bootstrap：组件不呈现

2 个答案: