显示数组元素 ReactJS

Question

UPD：如何在我的组件中显示数组元素 (WeatherCityName - h2)？可以看到加载了数组，但是当我点出属性时——出现错误，可能是语法有问题？

  var WeatherBox = React.createClass({
   handleWeatherSubmit: function(text) {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: 'cityName=' + text,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  render: function() {
    return (
      <div className="wetherBox">
      <h1> Weather</h1>
      <WeatherForm onWeatherSubmit={this.handleWeatherSubmit} />
      <WeatherCityName data={this.state.data[0]} />
      <WeatherList data={this.state.data} />
      </div>
      );
  }
});

var WeatherCityName = React.createClass({
    render: function(){
        return(
            <h2>{this.state.data[0].cityName}</h2>
            );
    }
});

Answer 1

当然，只需将<h2>{weatherItem.cityName}</h2> 直接放在<div> 中即可。

var WeatherList = React.createClass({
  render: function() {
    var weatherNodes = this.props.data.map(function(weatherItem) {
      return (
        <div className="city-item-with-title">
          <h2>{weatherItem.cityName}</h2>
          <WeatherItem 
            cityid={weatherItem.cityid}
            type={weatherItem.type} 
            src={weatherItem.src} 
            temp={weatherItem.temp} 
            tempFrom={weatherItem.tempFrom} 
            tempTo={weatherItem.tempTo} 
            key={weatherItem.id}
          />
        </div>
      );
    });

    return (
      <div className="weatherList">
        {weatherNodes}
      </div>
    );
  }
});

• 编辑：我不确定要使用哪个天气项目作为标题，也许是this.props.data[0]？
• 编辑 2：假设您想使用第一个天气项目。
• 编辑 3：每个 weatherItem 一个标题，与对应的 weatherItem 一起分组在一个 div 中。