在 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

您总是可以将它们推入一个数组，然后将数组包装在一个 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>

Answer 2

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

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>)

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

Idiomatic way to append an element in JSX

javascript

jsx

reactjs