Javascript React-ajax数据集成

我已经用这样的ReactDOM.render构建了一个应用程序

ReactDOM.render(
<Carousel>
    <img src="http://placehold.it/300x100" short="test test test test test test test test test test test test" long="1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, quam modi dolore, reiciendis fugit illo vel? Dolorum qui ad pariatur non eaque consequatur illum inventore, unde repudiandae, possimus eum vitae."/>
    <img src="http://placehold.it/300x100" short="test test test test test test test test test test test test" long="1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, quam modi dolore, reiciendis fugit illo vel? Dolorum qui ad pariatur non eaque consequatur illum inventore, unde repudiandae, possimus eum vitae."/>
</Carousel>,
document.getElementById('contentModule')
);

有没有一种方法可以使用json与它的孩子们一起构建旋转木马？或者我必须改变我的代码以其他方式合并它吗

我尝试加载数据并将其分配给状态，但我不知道是否可以在我的私有渲染函数中使用此对象

var Carousel = React.createClass({
  componentDidMount: function() {
    this._loadData();
  },
  render: function(){
    let style = this._handleHeight();
    return (
      <div 
      className='carousel' style={style}>
        <div className="figure-wrapper">
          {this._renderFigureNodes()}
        </div>
      </div>
    )
  },
  _loadData: function() {
    $.ajax({
      url: '/misc/bundles.php',
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('#GET Error', status, err.toString());
      }.bind(this)
    });
  },
  _renderFigureNodes() {

     let figureNodes = React.Children.map(this.props.children, (child, index) => {
     let style = this._handleFigureStyle(index, this.state.current);
     let className = this._handleFigureClass(index, this.state.current);
     let current = this.state.current;
     return (

       <figure
       className={className}
       style={style}
       key={index}
       onClick={this._handleFigureClick.bind(this, index, current)}
       onMouseEnter={this._handleFigureHover.bind(this, index, true)}
       onMouseLeave={this._handleFigureHover.bind(this, index, false)}
       >

         {child}
         <div className='short'>

           {child.props.short}

         </div>

       </figure>

     );
   });
   return figureNodes;
 }
});

---

结果很简单

我必须在getInitialState中定义空数组，以便始终定义它

getInitialState: function(){

  let wProcent;

  return {
    current: 0,
    move: 0,
    page: 0,
    clicked: false,
    helper: wProcent,
    data: []
  }
}

_loadData（）正常

然后将“this”保存在变量中，因为它不再指向react类

_renderFigureNodes() {

  var that = this;

  let figureNodes = this.state.data.map(function(child, index) {

    let style = that._handleFigureStyle(index, that.state.current);
    let className = that._handleFigureClass(index, that.state.current);
    let current = that.state.current;
    return (

      <figure
      className={className}
      style={style}
      key={index}
      onClick={that._handleFigureClick.bind(that, index, current)}
      onMouseEnter={that._handleFigureHover.bind(that, index, true)}
      onMouseLeave={that._handleFigureHover.bind(that, index, false)}
      >
        <img src={child.src} />

        <div className='short'>

          {child.short}

        </div>

      </figure>

    )

  })

  return figureNodes;
}

\u renderFigureNodes（）{
var=这个；
让figureNodes=this.state.data.map（函数（子函数，索引）{
让style=that.\u handleFigureStyle（索引，that.state.current）；
让className=that.\u handleFigureClass（索引，that.state.current）；
让current=that.state.current；
返回(
{child.short}
)
})
返回数字节点；
}

getInitialState: function(){

  let wProcent;

  return {
    current: 0,
    move: 0,
    page: 0,
    clicked: false,
    helper: wProcent,
    data: []
  }
}

_renderFigureNodes() {

  var that = this;

  let figureNodes = this.state.data.map(function(child, index) {

    let style = that._handleFigureStyle(index, that.state.current);
    let className = that._handleFigureClass(index, that.state.current);
    let current = that.state.current;
    return (

      <figure
      className={className}
      style={style}
      key={index}
      onClick={that._handleFigureClick.bind(that, index, current)}
      onMouseEnter={that._handleFigureHover.bind(that, index, true)}
      onMouseLeave={that._handleFigureHover.bind(that, index, false)}
      >
        <img src={child.src} />

        <div className='short'>

          {child.short}

        </div>

      </figure>

    )

  })

  return figureNodes;
}