如何在React(AntDesign)中复用导航头部组件并嵌入页面内容？

首先修改你的NavHeader组件，让它支持接收外部传入的内容（通过React的children属性）：

import { useState } from 'react';
import { Layout } from 'antd'; // 假设你使用的是Ant Design的Layout组件
const { Header, Content, Footer, Sider } = Layout;

// 用TypeScript定义组件props类型（不用TS可省略这部分）
type NavHeaderProps = {
  children: React.ReactNode;
};

const NavHeader = ({ children }: NavHeaderProps) => {
  const [collapsed, setCollapsed] = useState(true);
  
  return (
    <Layout>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{padding: 0}}/>
        <Content>
          {/* 这里渲染外部传入的页面内容 */}
          {children}
        </Content>
        <Footer>
          My Footer
        </Footer>
      </Layout>
    </Layout>
  );
};

export default NavHeader;

复用组件的方法 #

在其他组件中，直接把需要展示的页面内容嵌套在NavHeader标签内部即可，示例如下：

import NavHeader from './NavHeader';

const HomePage = () => {
  return (
    <NavHeader>
      <div>
        <h1>首页标题</h1>
        <p>这是首页的具体内容，会自动填充到NavHeader的Content区域中</p>
        <button>首页操作按钮</button>
      </div>
    </NavHeader>
  );
};

export default HomePage;

核心说明 #

• React的children是组件的内置属性，专门用来传递组件内部需要嵌套的内容，这是复用布局类组件最常用的方案。
• 如果你不使用TypeScript，可以删掉type NavHeaderProps的定义，直接写成const NavHeader = ({ children }) => {...}。

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