React ES6 |子組件未呈現

我想從使用React的Firebase呈現數組。我有一個Container視圖，它從firebase獲取數據，並將數據傳遞給子組件。下面是代碼：React ES6 |子組件未呈現

Container.jsx

import React from 'react' 
import Firebase from 'firebase' 
import loadsTable from './loadstable' 

class Container extends React.Component{ 
    constructor(props){ 
     super(props) 
     this.loads = []; 
     this.state = {loads:[]} 
    } 
    render(){ 
     console.log("render" , this.state.loads) 
     return(<div> 
        <loadsTable loads={this.state.loads}/> 
       </div> 
     ) 
    } 
    componentWillMount(){ 
     this.firebaseRef = new Firebase("https://***.firebaseio.com/loads"); 
     this.firebaseRef.on("child_added", function(dataSnapshot) { 
      console.log(dataSnapshot.val()) 
      this.loads.push(dataSnapshot.val()); 
      this.setState({ 
       loads: this.loads 
      }); 
     }.bind(this)); 
    } 
} 

React.render(<Container/> , document.getElementById('app'))

這個成功獲取數據（負載），以及console.logs相同。

下面是子組件代碼：

LoadsTable.jsx

import React from 'react' 

class loadsTable extends React.Component{ 

    constructor(props){ 
     super(props) 
     console.log("init loadsTable"); 
     this.state = {loads:this.props.loads} 
    } 

    render(){ 
     console.log("this.state.loads " , this.props.loads); 
     console.log("this.state.loads " , this.state.loads); 
     var loads = this.props.loads.map(function(load, index){ 
      console.log("load " , load) 
      return <tr><td>{load.load_number}</td></tr> 
     }); 
     return(
      <div className="col-md-7"> 
       <table className="table table-hover table-bordered table-striped loads"> 
        <tbody> 
         {loads} 
        </tbody> 
       </table> 
      </div> 
     ) 
    } 
} 

export default loadsTable

這裏的問題是，沒有被渲染而事實上，在構造函數中的console.log是永遠調用。如果我在集裝箱constuctor CONSOLE.LOG的LoadsTable，我得到：

Chrome瀏覽器開發控制檯輸出

function loadsTable(props) { 
    _classCallCheck(this, loadsTable); 

    _get(Object.getPrototypeOf(loadsTable.prototype), "constructor", this).call(this, props); 
    console.log("init loadsTable"); 
    this.state = { loads: this.props.loads }; 
}

所以，我的問題是：沒有任何人知道我在做什麼錯在這裏，爲什麼LoadsTable沒有被實例化？

我正在使用Gulp構建和babelify來傳輸ES6。

對此的任何幫助將非常感激。提前致謝。

來源

2015-04-16 R. Shane Davis