在 JSX 中附加元素的惯用方式 [重复]

Posted 2023-02-21

【中文标题】在 JSX 中附加元素的惯用方式 [重复]

【英文标题】：Idiomatic way to append an element in JSX [duplicate]

【发布时间】：2017-08-05 01:59:10

【问题描述】：

给定以下 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 元素。

【参考方案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>

【参考方案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>)