web-dev-qa-db-fra.com

Manière idiomatique d'ajouter un élément dans JSX

Étant donné le JSX suivant:

const elems = <div><p>hello</p><p>world</p></div>

Si je veux ajouter un autre élément à la fin, y a-t-il une manière plus idiomatique que de le faire:

const moreElems = <div>{elems}<p>additional</p></div>

Peut-être quelque chose comme:

elems.Push(<p>additional</p>)

Je serais bien en omettant le wrapper div; c'est juste qu'il n'y a qu'un seul élément JSX de niveau supérieur.

javascriptreactjsjsx
11
Nick Heiner

Vous pouvez le faire en déclarant les premiers éléments d'un tableau:

const elements = [
  <p>hello</p>,
  <p>world</p>,
]

Et puis en poussant ce que vous voulez dans le tableau:

elements.Push(<p>Additionnal</p>)

Vous pouvez ensuite utiliser cet élément en utilisant {elements} où tu veux.

Gardez à l'esprit que cette notation de tableau vous obligerait à utiliser un paramètre key dans chacun de ces enfants, donc quelque chose comme ça serait mieux:

const elements = [
  <p key="1">hello</p>,
  <p key="2">world</p>,
]
elements.Push(<p key="3">additionnal</p>)
14
Thibaut Remy

Vous pouvez toujours les faire pousser dans un tableau, puis envelopper le tableau dans un div et réagir le traitera de manière appropriée, comme:

 const phrase = [];
 phrase.Push(<p key="hello">hello</p><p>world</p>)
 phrase.Push(<p key="additional">additional</p>)

 return <div> {phrase} </div>
1
finalfreq