React child componet不在主要組件中呈現

Question

我是reactjs的新手，我在創建簡單的反應應用程序時遇到了一些問題。子組件不會呈現給主組件。我沒有得到任何控制檯錯誤，但子組件UI中，無法顯示在主component.I有一個孩子組成部分像下面

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var NavBar = React.createClass({ 

render: function() { 

    return (
     <div className="navbar navbar-default"> 
        <div className="container"> 
         <div className="navbar-header pull-left"> 
          <ul className="nav navbar-nav"> 
           <li className="active"><a>Home<span className="sr-only">(current)</span></a></li> 
          </ul> 
         </div> 
         <div className="navbar-header pull-right"> 
          <ul className="nav navbar-nav navbar-right"> 
           <li className="dropdown"> 
            <a id="userAdsId" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Welcome, Bibin</a> 
           </li> 
          </ul> 
         </div> 
        </div> 
     </div> 
    ) 

} 

}); 

module.exports = NavBar 

下面

的主要成分是

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var navbar = require('./navBar'); 

ReactDOM.render(<navbar/>,document.getElementById('ContactForm')) 

請人幫助

Answer 1

的問題是在這條線：

var navbar = require('./navBar');

而是利用這一點：

var Navbar = require('./navBar');

它將工作。

原因：在JSX中，小寫字母名稱被認爲是HTML標籤。所以它的一個規則是所有的Reactcomponents必須以大寫字母開頭。