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中，并且反应将适当地处理它：

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

 return <div> {phrase} </div>

在JSX中附加元素的惯用法

2 个答案: