Reactjs ajouter un élément au lieu de les remplacer

Je suis en train de parcourir une liste ou un tableau/objet de choses: (j'ai utilisé coffeescript pour la protéger, jsfiddle de plein JS ici. mais c'est juste un 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]

et ajouter chacun d'eux, au lieu de les remplacer, ne laissant que le dernier élément de la liste.

Où la #start élément est à partir de conteneur, et je veux le remplir avec de multiples éléments, mais j'ai besoin de donner à chacun leur propre conteneur, sinon ils vont tout écraser l'autre, la valeur par défaut reactjs comportement.

Je me demandais si il existe un moyen de dire à réagir à ajouter au lieu de remplacer la div.

J'aimerais éviter d'utiliser jquery, si possible, et de le faire purement réagir-ly.

J'ai bien les propos de donner à la React.renderComponent page la liste initiale, puis itérer jusqu'à présent appelé modèle, cependant, alors que je suis confronté à un autre problème, je dois return un reactjs élément de l'objet, composé de l'ensemble de la liste, je n'ai pas vraiment de préférence.

J'ai besoin pour l'appel initial à la création personnelle, indépendante de réagir modèles, ajoutant eachother dans une liste, prefferably sans conteneurs supplémentaires, ou à l'aide de jquery.

OriginalL'auteur TrySpace | 2014-03-11

  1. 15

    Je pense que vous obtenez le concept de mal. Réagir de renderComponent, en effet, rend une unique composante, quelque part. Faire cela plusieurs fois seulement re-rend le même composant à cet endroit (aka idempotent). Il n'y a pas de véritable "append" déclaration, au moins pas de la manière que vous avez demandé.

    Voici un exemple de ce que vous essayez d'atteindre. Oublié renderComponent dans ce. C'est juste pour mettre l'élément quelque part.

    /** @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);

    Voir ce que j'ai fait là? Si je veux de plusieurs divs, je viens d'en créer autant que je veux voir. Ils représentent l'aspect final de votre application, afin de faire un même div être "ajouté" à plusieurs reprises n'a pas vraiment de sens ici.

    La raison pourquoi je veux ajouter, c'est de garder un autre composant, de sorte que je puisse mettre à jour ou de modifier chaque page individuellement. J'ai besoin d'accéder à des états et willComponentUpdate. Set et get. Arbre-comme json représente dom, quand je change de json, dom changements, essentiellement
    Il est très facile de le faire à Réagir. Si vous souhaitez plus d'aide, venir à l'irc #reactjs canal.
    Est renderComponent obsolète?
    La réponse est un peu daté, mais oui, il est appelé React.render maintenant.
    Actuellement il est maintenant ReactDOM.render

    OriginalL'auteur chenglou