无法在ReactJS组件中呈现json数据

时间:2016-06-07 11:01:45

标签: javascript json ajax reactjs

我正在尝试在我的ReactJS组件中显示来自package.json的数据。我在SO上看到了许多答案,并试图实现它。它既不显示任何数据也不显示错误。 这是package.json:

{
  "name":"Clark Kent",
  "job":"Superman"
}

这是我的jsx:

var App = React.createClass({

    getInitialState: function(){
      return { myData: [] };
    },

    showResults: function(response){
        this.setState({
            myData: response
        });
    },

    loadData: function(URL) {
      var that = this;
      $.ajax({
        type: 'GET',
        dataType: 'jsonp',
        url: URL,
        success: function(response){
          that.showResults(response);
        }
      })
    },
    componentDidMount: function() {
      this.loadData("package.json");
    },

    render: function(){
      return(
        <div>
        <Component1 data={this.state.myData} />
        <Component2 data={this.state.myData}/>
        </div>
      )
    }
});
var Component1 = React.createClass({
    render: function () {
      return(
        <div>Name: {this.props.data.name}</div>
      )
    }
});

var Component2 = React.createClass({
    render: function () {
      return(
        <div>Job: {this.props.data.job}</div>
      )
    }
});

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

0 个答案:

没有答案