如何將json值傳遞到React組件

Question

我正在用React創建一個Github問題查看器。

我有一個組件設置回購，然後我想創建單獨的組件來獲取問題的名稱，編號，登錄等。這些組件將最終在主要組件/視圖中使用。我有點卡住了，下面是我到目前爲止。

var GetRepo = React.createClass({ 
getRepo: function(){ 
    var issues = $.getJSON('https://api.github.com/repos/facebook/react/issues', function (data) { 
    }) 
}, 
render: function() { 
    return <div>My repo: {this.props.repo}</div> 
} 

}); 

ReactDOM.render(<GetRepo repo="facebook/react/issues" />, document.getElementById('main')); 


var IssueName = React.createClass({ 
}); 
//IssueName gets the data.title (the issue name) using repo GetRepo 

var IssueNumber = React.createClass({ 
}); 

//IssueNumber gets the data.number (the issue number) using repo from GetRepo 

Answer 1

當然不這樣做的唯一途徑，但下面應該工作：

var GetRepo = React.createClass({ 

    getInitialState: function() { 
     return { 
      repo: {} 
     }; 
    }, 

    componentDidMount: function(){ 
     var that = this; 
     var issues = $.getJSON('https://api.github.com/repos/facebook/react/issues', function (data) { 
      that.setState({ 
       repo: data 
      }); 
     }); 
    }, 

    render: function() { 
     return (
      <div> 
       <IssueName repo={this.state.repo} /> 
       <IssueNumber repo={this.state.repo} /> 
      </div> 
     ); 
    } 
}); 


//IssueName gets the data.title (the issue name) using repo GetRepo 
var IssueName = React.createClass({ 
    render: function() { 
     return (
      <div>this.props.repo.title</div> 
     ); 
    } 
}); 

//IssueNumber gets the data.number (the issue number) using repo from GetRepo 
var IssueNumber = React.createClass({ 
    render: function() { 
     return (
      <div>this.props.repo.number</div> 
     ); 
    } 
}); 

ReactDOM.render(<GetRepo repo="facebook/react/issues" />, document.getElementById('main'));