Javascript 在JSX中附加元素的惯用方法

考虑到以下JSX：

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

const elems=你好
世界

如果我想在结尾添加另一个元素，是否有比这样做更惯用的方法：

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

const morelems={elems}

可能是这样的：

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

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

 return <div> {phrase} </div>

元素推送（附加
）

---

省略包装器

div

，我会很好；这只是因为只有一个顶级JSX元素。

您可以将它们推送到一个数组中，然后将数组包装到一个div中，然后react将适当地处理它，如：

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

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

 return <div> {phrase} </div>

const短语=[]；
短语.推送（
hello
world
）
短语.推送（
additional
）
返回{phrase}

您可以通过声明数组中的第一个元素来实现：

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