Reactjs JSX语法和React.createElement（）之间的差异

我正在查看并注意到，当我将语法从JSX更改为常规JS（使用

React.createElement

）时，我得到了警告

数组或迭代器中的每个子级都应该有一个唯一的“key”prop

。所以我想JSX做了一些额外的事情。
真正的区别是什么？
是否可以在不使用JSX或不提供密钥的情况下修复此警告

为了清楚起见，这是给我一个警告的片段：

React.createElement(AppWrapper, {}, [
  React.createElement(Helmet, {titleTemplate: "Boilerplate"},
    React.createElement('meta', {name: "description"})
  ),
  React.createElement(Switch, {}, [
    React.createElement(Route, {exact: true, path: "/", component: HomePage}),
    React.createElement(Route, {path: "/features", component: FeaturePage}),
  ]),
  React.createElement(Footer)
])

这是JSX，它没有给我任何警告：

<AppWrapper>
  <Helmet titleTemplate="Boilerplate">
    <meta name="description" />
  </Helmet>
  <Header />
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/features" component={FeaturePage} />
  </Switch>
  <Footer />
</AppWrapper>

---

这很简单。当您仅将一个元素作为另一个元素的子元素传递时，该元素不应是数组

React.createElement(AppWrapper, {}, 
  React.createElement(Helmet, {titleTemplate: "Boilerplate"},
    React.createElement('meta', {name: "description"})
  ),
  React.createElement(Switch, {},
    React.createElement(Route, {exact: true, path: "/", component: HomePage}),
  ),
  React.createElement(Footer)
)

否则就像在JSX中一样

<Helmet titleTemplate="Boilerplate">
   {['description'].map(description => <meta name={description} />)}
</Helmet>

{['description'].map（description=>）}

---

这也需要一个

键

，

如果要渲染数组元素，react总是要求为它们提供键。有关元素渲染列表的更多信息，请点击此处

谢谢您的回答。。。我更新了问题，但问题是相同的：JSX版本不需要使用密钥，而JS版本仍然给出“密钥”警告。您只修复了一个地方。在第一个代码段中还有另外两个数组，那么为什么不在JSX版本中询问密钥呢？这不一样吗？在JSX中不使用数组。它只是另一个元素中的一个元素。就像我在我的第一个片段中所做的，你基本上是在比较两种不同的东西