React默认导出AdminDashboard组件嵌套子组件的渲染实现

原代码无法正常渲染的核心问题 #

• return 语法错误：原AdminDashboard的return语句未用括号包裹返回的JSX内容，换行后会触发JavaScript自动分号插入机制，相当于函数直接返回undefined，后续写的两个组件根本不会被执行渲染。
• 多根节点渲染报错：就算修正了return的括号写法，直接并列写两个无外层包裹的JSX组件，也不符合React组件的渲染规则——每个函数组件必须返回单个顶层可渲染元素。
• JSX标签不闭合：原代码编写的两个子组件中，最外层带bg-dark类名的div标签缺少对应的闭合标签，会直接触发JSX语法解析报错。
• 组件功能与需求不匹配：需求是拆分实现ShowHeader（头部展示）、ShowButton（操作按钮）两个独立子组件，原代码写的两个子组件JSX完全重复，没有对应拆分功能，命名也不匹配。

可正常运行的修正后代码 #

import React from 'react';

// 默认导出的父组件：后台仪表盘
function AdminDashboard() {
  return (
    // 用空Fragment<></>包裹多个并列子组件，不额外生成多余DOM节点
    <>
      {/* 引入头部展示子组件 */}
      <ShowHeader />
      {/* 引入操作按钮子组件 */}
      <ShowButton />
    </>
  )
}

// 子组件1：头部展示功能
function ShowHeader() {
  return(
    <div className='bg-dark text-white py-4'>
      <div className='container'>
        <div className='row'>
          <div className='col-md-6'>
            <h1>
              <i className='fas fa-home'> 首页</i>
            </h1>
          </div>
        </div>
      </div>
    </div>
  )
}

// 子组件2：操作按钮功能
function ShowButton() {
  return(
    <div className='container my-3'>
      <button className='btn btn-primary me-2'>
        <i className='fas fa-plus'></i> 新增数据
      </button>
      <button className='btn btn-danger'>
        <i className='fas fa-trash'></i> 批量删除
      </button>
    </div>
  )
}

export default AdminDashboard;

补充说明 #

• 这里用的<></>是React提供的Fragment语法，核心作用是在不增加额外DOM节点的前提下，包裹多个并列的JSX元素，满足React单根节点的要求；如果需要给包裹块传递属性，也可以替换为完整的<React.Fragment></React.Fragment>写法。
• 如果不需要考虑多余DOM节点的问题，直接用普通<div>标签包裹两个子组件，也可以正常渲染。

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