Question

我正在查看React Boilerplate，我注意到当我将语法从JSX更改为常规JS（使用React.createElement）时，我会收到警告Each child in an array or iterator should have a unique "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>

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

Answer 2

如果要渲染数组元素，则总是要求为它们提供密钥。有关呈现元素列表的更多信息，请查看此doc

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

2 个答案: