JSX 语法和 React.createElement() 的区别答案

【问题标题】：Differences between JSX syntax and React.createElement()JSX 语法和 React.createElement() 的区别
【发布时间】：2018-03-11 13:00:01
【问题描述】：

我正在查看React Boilerplate，我注意到当我将语法从 JSX 更改为常规 JS（使用 React.createElement）时，我收到了警告 Each child in an array or iterator should have a unique "key" prop。所以我猜 JSX 做了一些额外的事情。
真正的区别是什么？
是否可以在不使用 JSX 或不提供密钥的情况下修复此警告？

为了清楚起见，这是给我警告的 sn-p：

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>

【问题讨论】：

标签： reactjs react-router jsx

【解决方案1】：

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

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>

这也需要key

【讨论】：

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

【解决方案2】：

如果您正在渲染数组元素，react 总是要求为它们提供键。检查此doc 以获取有关渲染元素列表的更多信息

【讨论】：