Реагировать на интеграцию данных ajax

Question

Реагировать на интеграцию данных ajax

-2

Я создал приложение с таким 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)
})

Animal 18 май 2016, в 12:08

Источник

Теги:

javascript

reactjs

ajax

json

1 ответ

Ещё вопросы

Animal · Accepted Answer · 2016-05-18T10-11-00.000Z

Это оказалось довольно простым.

Мне нужно было определить пустой массив в 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;
}