陣營AJAX數據集成

Question

我已經建立了一個應用程序與此類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') 
); 

現在我不得不讓IMG是一個單一的元素，這與JSON整合。

[ 
    { 
     "src":"\/media\/images\/test\/corporate_portfolio.jpg", 
     "short":"test test test test test test test test test test test test", 
     "long":"0Lorem 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.", 
    }, 
    { 
     "src":"\/media\/images\/test\/corporate_portfolio.jpg", 
     "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.", 
    }, 
] 

有沒有辦法與它的孩子使用json構建一個Carousel？或者我必須改變我的代碼，以其他方式合併它？

我嘗試加載數據並將其分配給狀態，但我無法確定是否可以在我的私有渲染函數中使用此對象。

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

我需要以某種方式集成{child}和{child.short}與json。

我試圖在_renderFigureNodes中映射我的數據對象，但它調用函數時似乎未定義。

this.state.data.map(function (data) { 
    console.log(data.short) 
}) 

Answer 1

原來很簡單。

我必須在getInitialState中定義空數組，以便始終定義它。

getInitialState: function(){ 

    let wProcent; 

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

_loadData（）沒問題。

然後將'this'保存在變量中，因爲它不再指向反應類。

_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; 
}