Реагировать АЯКС интеграции данных

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

Теперь я должен интегрировать это с JSON, так что IMG является единственным элементом.

[ 
    { 
     "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? Или мне нужно изменить свой код, чтобы включить его каким-то другим способом?

Я попытался загрузить данные и присвоить их состоянию, но я не могу понять, могу ли я использовать этот объект в своей частной функции рендеринга.

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() в порядке.

Затем сохраните «это» в переменной, потому что он больше не указывает на реакцию класса.

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