在JSX中附加元素的惯用法

Question

鉴于以下JSX:

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

如果我想在最后添加另一个元素,那么是否有更多惯用的方式:

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

也许是这样的:

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

我会很好地省略包装器div; 就是这样,只有一个顶级的JSX元素.

Answer 1

你可以通过声明数组中的第一个元素来做到这一点:

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

然后将任何你想要的东西推送到数组:

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

然后,您可以{elements}在任何您想要的地方使用此元素.

请记住,这个数组表示法要求你key在每个子节点中使用一个参数,所以像这样的东西会更好:

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

Answer 2

您始终可以将它们推入数组中，然后将数组包装在 div 中，然后 React 会适当地处理它，例如：

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

 return <div> {phrase} </div>