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

如何将json值传递给React组件

1 个答案: