Как динамически заполнять элементы списка в React

Question

Я настраиваю слайдер изображений с помощью слайдера миниатюр, используя этот плагин в React.js: http://flexslider.woothemes.com/thumbnail-slider.html

Если я добавлю <li> s статически, это будет прекрасно работать:

<div id="carousel" class="flexslider">
  <ul class="slides">
    <li><img src="slide1.jpg" /></li>
    <li><img src="slide2.jpg" /></li>
    <li><img src="slide3.jpg" /></li>
    <li><img src="slide4.jpg" /></li>
  </ul>
</div>

Однако, если я попытаюсь загрузить содержимое динамически, встроенные стили, которые динамически рассчитываются и добавляются с помощью кода плагина, не будут добавлены к элементам ul и li (т.е. width: 210px; margin-right: 5px; float: left; display: block;)

Вот как я это делаю:

render() {

  if(this.props.data){
    var projects = this.props.data.projects.map(function(projects){
    var projectImage = 'images/portfolio/'+projects.image;

    return <li key={projects.title}>
             <img alt={projects.title} src={projectImage} />
           </li>
    })
  }

  return (
    <section id="portfolio">
      <div id="carousel" class="flexslider">
        <ul class="slides">
          {projects}
        </ul>
      </div>
    </section>
  );
}

Answer 1

По указанной вами ссылке плагин требует инициализации. Где вы делаете свою инициализацию?

Я бы рекомендовал выполнить инициализацию в методе жизненного цикла componentDidMount. Это потому, что когда этот код запускается, <li> уже был бы в DOM.