如何将 json 值传递给 React 组件

Question

我正在使用 React 创建一个 Github 问题查看器。

我有一个设置 repo 的组件，然后我想创建单独的组件来获取问题名称、编号、登录等。这些组件最终将在主组件/视图中使用。我有点卡住了，下面是我到目前为止所拥有的。

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'));