reactjs - JSX 语法和 React.createElement() 之间的差异

Question

我正在查看React Boilerplate我注意到，当我将语法从 JSX 更改为常规 JS(使用 React.createElement)时，我收到警告数组或迭代器中的每个子项都应该有一个唯一的“key”属性。所以我猜 JSX 做了一些额外的事情。
真正的区别是什么？
是否可以在不使用 JSX 或不提供 key 的情况下修复此警告？

为了清楚起见，这是向我发出警告的代码片段:

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>

Answer 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