Comment faire pour ajouter à dom à Réagir?
Voici un js fiddle montrant la question dans l'action.
Dans la fonction rendu d'un composant, j'ai rendu un div avec une classe .blah
. Dans le componentDidMount
fonction de la même composante, je m'attendais à être en mesure de sélectionner la classe .blah
et l'ajouter comme cela (puisque le composant avait monté)
$('.blah').append("<h2>Appended to Blah</h2>");
Cependant, joints en annexe le contenu ne s'affiche pas. J'ai aussi essayé (également montré dans le violon) pour ajouter de la même façon, mais à partir d'un composant parent dans un sous-composant, avec le même résultat, et aussi de la sous-composant dans l'espace du composant parent avec le même résultat. Ma logique pour tenter ce dernier était que l'on pouvait être plus sûr que l'élément dom avait été rendue.
En même temps, j'ai été capable (dans le componentDidMount
fonction) pour getDOMNode
et de les ajouter à cette
var domnode = this.getDOMNode();
$(domnode).append("<h2>Yeah!</h2>")
pourtant des raisons de le faire avec le style CSS, j'ai voulu être en mesure d'ajouter un div avec une classe que je connais. Aussi, puisque, selon la docs getDOMNode
est obsolète, et il n'est pas possible d'utiliser le remplacement de getDOMNode
de faire la même chose
var reactfindDomNode = React.findDOMNode();
$(reactfindDomNode).append("<h2>doesn't work :(</h2>");
Je ne pense pas que getDOMNode
ou findDOMNode
est la façon correcte de faire ce que je suis en train de faire.
Question: Est-il possible d'ajouter à un id ou une classe à Réagir? Quelle démarche dois-je utiliser pour accomplir ce que je suis en train de faire (getDOMNode
même si c'est obsolète?)
var Hello = React.createClass({
componentDidMount: function(){
$('.blah').append("<h2>Appended to Blah</h2>");
$('.pokey').append("<h2>Can I append into sub component?</h2>");
var domnode = this.getDOMNode();
$(domnode).append("<h2>appended to domnode but it's actually deprecated so what do I use instead?</h2>")
var reactfindDomNode = React.findDOMNode();
$(reactfindDomNode).append("<h2>can't append to reactfindDomNode</h2>");
},
render: function() {
return (
<div class='blah'>Hi, why is the h2 not being appended here?
<SubComponent/>
</div>
)
}
});
var SubComponent = React.createClass({
componentDidMount: function(){
$('.blah').append("<h2>append to div in parent?</h2>");
},
render: function(){
return(
<div class='pokey'> Hi from Pokey, the h2 from Parent component is not appended here either?
</div>
)
}
})
React.render(<Hello name="World" />, document.getElementById('container'));
Vous devez vous connecter pour publier un commentaire.
Dans JSX, vous devez utiliser
className
, pasclass
. La console devrait afficher un avertissement à ce sujet.Fixe exemple: https://jsfiddle.net/69z2wepo/9974/
Vous utilisez
React.findDOMNode
de manière incorrecte. Vous devez passer un Réagir composant, par exempleserait de retour le nœud DOM du composant lui-même.
Cependant, comme déjà mentionné, vous devriez vraiment éviter la mutation du DOM à l'extérieur de Réagir. Toute la question est de décrire l'INTERFACE utilisateur une fois basé sur l'état et les accessoires de la composante. Puis modifier l'état ou les accessoires alors rendre à nouveau le composant.
Éviter l'utilisation de jQuery à l'intérieur de réagir, car il devient un peu d'un antipattern. Je ne l'utiliser un peu de moi-même, mais seulement pour les recherches/les lectures qui sont trop compliquées ou trop près impossible de se contenter de réagir composants.
De toute façon, pour résoudre votre problème, pouvez simplement tirer profit d'un etat de l'objet:
Désolé pour JSX de conversion, mais il a été plus facile pour moi de tester sans mettre en place de grunt :).
De toute façon, ce que je suis en train de faire est de tirer parti de la propriété de l'etat. Lorsque vous appelez setState, render() est invoqué à nouveau. J'ai alors l'effet de levier des accessoires pour transmettre des données vers le sous-composant.
Voici une version de votre JSFiddle avec le moins de changements que je pourrais faire: JSFiddle
agmcleod du conseil est de droit -- éviter de JQuery. Je voudrais ajouter à éviter JQuery pensée, ce qui m'a pris un certain temps à comprendre. À Réagir, la méthode de rendu doit rendre compte de ce que vous voulez voir en fonction de l'état du composant. Ne pas manipuler le DOM, après le fait, de manipuler l'état. Lorsque vous modifiez l'état, le composant sera ré-rendu et vous verrez le changement.
L'état initial (nous n'avons pas ajouté quoi que ce soit).
Modifier l'état (nous voulons ajouter)
Maintenant la fonction rendu peut afficher de texte supplémentaire ou pas en fonction de l'état: