我必须将组件包装在 html 标签中吗？答案

【问题标题】：Do I have to wrap components in html tags?我必须将组件包装在 html 标签中吗？
【发布时间】：2016-11-13 19:43:41
【问题描述】：

我已经看到了组件似乎总是被包裹在 HTML 标记中的模式。

我搜索了the docs 以检查这是否是强制性的，但没有找到任何关于该主题的内容。

如果上述情况不正确，为什么我在第一个代码示例而不是第二个代码示例中得到错误？

const App = (props) => {
  return (
    <Header />
    {props.children}
  );
};

const App = (props) => {
  return (
    <div>
      <Header />
      {props.children}
    </div>
  );
};

【问题讨论】：

也许很有趣？ stackoverflow.com/questions/22280315/…。这似乎是说一个组件必须在一个 DOM 节点子树中？我不认为我解释得很好；-/

标签： reactjs

【解决方案1】：

不，不需要将渲染包装在 div 或其他 html 元素中，您可以使用组件作为根元素进行渲染。但是，您不能拥有多个根元素，这就是您在第一个示例中遇到错误的原因。但是，以下方法会起作用：

render() {
   <Header>
     <h1>Hello World</h1>
     <p>Lorem ipsum</p>
   </Header>
}

最后，您可能仍然需要在 Header 组件中使用某种包装器 div，因为您不能拥有超过 1 个根元素。

我确实在某个地方读到过 React 团队正在研究这个问题，并且新的协调器支持多个根元素，但还远未完成。

【讨论】：

【解决方案2】：

您不必将它们专门包装在 HTML 标记中。您可以将它们包装在自定义组件中。

您遇到的错误是因为组件必须返回单个节点，这就是您不能这样做的原因：

// WRONG
const App = (props) => {
  return (
    <Header />
    {props.children}
  );
};

【讨论】：