Question

我非常感激能帮助我解决这条问题我是这样的：

 var Country = React.createClass({
        render:function(){
            return(
                <nav> 
                <h2>list of country:</h2>
                { this.props.country}
                </nav>
            )
        }
    }) 
    var Jugador =React.createClass({
          componentWillMount: function(){
                var pais;
                var self = this;
                $.getJSON("https://restcountries.eu/rest/v1/all", function(data){
                    for(pais in data)
                    {
                        console.log(pais, data[pais].name);

                        return(
                            <Country key={i} country={self.render(data[pais].name)}> </Country>
                        )
                    }
                })
          },
    })

并且它不起作用，并出现此错误 Uncaught Invariant Violation：createClass（...）：类规范必须实现render方法。

Answer 1

您的Jugador组件需要实施render方法。

Answer 2

在React中，每个组件必须具有render方法，您应该实现它。我已经重构了你的代码，现在它看起来像这样

var Country = React.createClass({
  render: function() {
    return <div> 
      { this.props.country }
    </div>
  }
})

var Countries = React.createClass({
  getInitialState: function () {
    return { countries: [] };
  },

  componentWillMount: function(){
    $.getJSON("https://restcountries.eu/rest/v1/all", function (data) {
      this.setState({ countries: data })
    }.bind(this))
  },

  render: function () {
    var countries = this.state.countries.map(function (el, i) {
      return <Country key={i} country={ el.name } />
    }, this);

    return <nav>
      <h2>list of country:</h2>
      <div>{ countries }</div>
    </nav>;
  }       
})

Example

用reactjs加载json

2 个答案: