Reactjs добавляет элемент вместо замены

Я пытаюсь выполнить итерацию по списку/массиву/объекту вещей: (я использовал coffeescript, чтобы это было ясно, jsfiddle полного JS здесь., но это просто forEach)

pages = for page, each of @props.ids
    $('#start').append("<div id='"+page+"' ></div>")
    React.renderComponent page(title: each.title, text: each.text), $("#"+page)[0]

и добавьте каждый из них вместо замены, оставив только последний элемент в списке.

Если элемент #start является стартовым контейнером, и я хочу заполнить его несколькими элементами, но мне нужно предоставить каждому свой собственный контейнер, в противном случае все они будут перезаписаны eachother, по умолчанию реагирует на поведение.

Мне интересно, есть ли способ сказать, как реагировать на добавление вместо замены div.

Я хотел бы избежать использования jquery, если это возможно, и сделать это чисто реагировать.

Хотя я предлагаю исходный список React.renderComponent page, а затем итерацию в ранее названном шаблоне, то я столкнулся с другой проблемой, я должен return объект элемента реакции, состоящий из из всего списка, который я действительно не предпочитаю.

Мне нужно для первоначального вызова создать индивидуальные, независимые шаблоны ответов, добавить друг друга в список, предварительно без каких-либо дополнительных контейнеров или с помощью jquery.

Ответы

Ответ 1

Я думаю, что вы неправильно поняли концепцию. React renderComponent действительно представляет один компонент где-то. Выполнение этого многократного повторения делает только один компонент в этом месте (aka idempotent). Там нет реального заявления "добавить", по крайней мере, не так, как вы просили.

Вот пример того, чего вы пытаетесь достичь. Забыл о renderComponent в этом. Это просто поставить компонент где-нибудь.

/** @jsx React.DOM */
var pages = [{title: 'a', text: 'hello'}, {title: 'b', text: 'world'}];

var App = React.createClass({
  render: function() {
    return (
      <div>
        {
          this.props.pages.map(function(page) {
            return <div>Title: {page.title}. Text: {page.text}</div>;
          })
        }
      </div>
    );
  }
});

React.renderComponent(<App pages={pages} />, whateverDOMNodeYouWantItToBeOn);

Посмотрите, что я там сделал? Если мне нужно несколько div s, я просто создаю столько, сколько захочу. Они представляют собой окончательный внешний вид вашего приложения, поэтому сделать так, что один и тот же div будет "добавлен" несколько раз, здесь действительно не имеет смысла.