React嵌套组件语法疑问：<Compound>包裹子元素是否等同于<div>？

1. 目标JSX代码的含义 #

<Compound>
  <h1>HELLO WORLD</h1>
</Compound>

这是在给自定义的Compound组件传递子元素（children）——也就是包裹在组件标签里的<h1>HELLO WORLD</h1>。在React规则里，组件标签之间的内容会自动作为children属性传递给组件。

2. 与目标div代码的效果对比 #

完全不等同。

你当前写的Compound组件只返回了一个空的<div></div>，根本没有处理传入的children，所以实际渲染后只会出现空div，里面的<h1>不会被展示。

如果想让Compound组件实现和<div><h1>HELLO WORLD</h1></div>一样的效果，需要修改Compound组件，接收并渲染children：

function Compound({ children }){
  return(
    <div>{children}</div>
  );
}

修改后再使用<Compound><h1>HELLO WORLD</h1></Compound>，渲染结果就和目标div代码完全一致了。

内容的提问来源于stack exchange，提问作者Onxy_Tzy