在ReactJS、NextJS中能否像HTML一样使用嵌套组件标签？

完全可以用你给出的这种嵌套方式来写组件，这在React、Vue这类主流前端框架里是很常见的操作。

示例代码 #

<Component1>
  <Component2>
  </Component2>
</Component1>

这种写法本质是把Component2作为Component1的子内容传递进去，在Component1内部，你可以通过框架提供的方式（比如React里的props.children，Vue里的插槽）来渲染这个嵌套的子组件，以此实现组件的组合复用。

举个简单例子，在React里Component1可以这么写来接收子组件：

function Component1(props) {
  return (
    <div className="component1-wrap">
      {/* 渲染嵌套进来的Component2 */}
      {props.children}
    </div>
  );
}

要是用Vue的话，Component1可以通过默认插槽来处理：

<template>
  <div class="component1-wrap">
    <!-- 插槽会渲染嵌套的Component2 -->
    <slot></slot>
  </div>
</template>

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