React.js未定義的函數

Question

繼React.js上的微軟教程是here。

我想映射一個列表的功能，所以它重複了很多次。

這是什麼代碼的主片的錯誤是：

{[1,2,3].map(this.renderInboxItem)} 

我得到的錯誤是：

bundle.js:8488 Uncaught TypeError: undefined is not a function 

這裏是全碼：

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var sample = require('./sample-data.js'); 

var App = React.createClass({ 

    renderInboxItem: function(){ 
    return <h1> Test </h1> 
    }, 
    getInitialState: function() { 
    return { 
     "humans":{}, 
     "store":{} 
    }; 
    }, 
    loadSampleData: function(){ 
    this.setState(sample); 
    }, 
    render : function() { 
    return (
     <div> 
     <div id="header"></div> 
     <button onClick={this.loadSampleData}> loadSampleData </button> 
     <div className="container"> 
      <div className="column"> 
      <InboxPane humans={this.state.humans} /> 
      </div> 
      <div className="column"></div> 
      <div className="column"></div> 
     </div> 
     </div> 
    ) 
    } 
}); 

var InboxPane = React.createClass({ 
    render : function() { 
    return (
     <div id="inbox-pane"> 
     <h1>Inbox</h1> 
     <table> 
      <thead> 
      <tr> 
       <th>Chat Received</th> 
       <th>Name</th> 
       <th>Status</th> 
      </tr> 
      </thead> 
      <tbody> 
     {[1,2,3].map(this.renderInboxItem)} 


      </tbody> 
     </table> 
     </div> 
    ) 
    } 
}); 

var InboxItem = React.createClass({ 
    render: function(){ 
    return (
     <tr> 
     <td>5PM</td> 
     <td>Rami Loves Pizza</td> 
     <td>Order Sent</td> 
     </tr> 
    ) 
    } 
}); 

ReactDOM.render(<App/>, document.getElementById('main')); 

Answer 1

renderInboxItem在你的App課上定義，但是你在你的InboxPane課上叫它不存在。將方法移至InboxPane。