如何实现导航栏项激活时对应渲染指定组件？

你遇到的核心问题是NavItem的children被错误覆盖，同时存在标签激活状态管理分散的问题，以下是具体修复步骤：

1. 根源定位 #

在NavBar组件的map循环中，你给NavItem标签内部传入了{item.label}，这会作为children传递给NavItem，直接覆盖了你通过children={item.children}传入的组件，最终导致NavItem里的children变成标签文本而非目标组件。

另外，原代码中items数组的第一个对象存在语法错误（children: <Home/>后缺少逗号），且每个NavItem独立维护激活状态会导致多个标签同时激活，不符合标签栏的交互逻辑。

2. 修正后的代码 #

父组件（调用NavBar的组件） #

return (
  <div>
    <NavBar
      items={[
        { label: 'Home', component: <Home/>, key: 'Home' },
        { label: 'Profile', component: <ProfileComponent/>, key: 'Profile' }
      ]}
    />
  </div>
)

NavBar与NavItem组件 #

import React, { useState } from 'react';

const NavBar = ({ items }) => {
    // 统一管理激活标签的key
    const [activeKey, setActiveKey] = useState(items[0]?.key);

    return (
        <nav className="border-b mb-4">
            <ul className="flex space-x-6 p-4">
                {items.map((item) => (
                    <NavItem
                        key={item.key}
                        label={item.label}
                        isActive={activeKey === item.key}
                        onClick={() => setActiveKey(item.key)}
                    />
                ))}
            </ul>
            {/* 渲染当前激活标签对应的组件 */}
            {items.find(item => item.key === activeKey)?.component}
        </nav>
    );
};

const NavItem = ({ label, isActive, onClick }) => {
    return (
        <li>
            <a
                href="#"
                className={`text-blue-600 hover:text-blue-800 ${isActive ? 'font-bold border-b-2 border-blue-600' : ''}`}
                onClick={(e) => {
                    e.preventDefault(); // 阻止默认跳转行为
                    onClick();
                }}
            >
                {label}
            </a>
        </li>
    );
};

export default NavBar;

3. 关键优化点 #

• 统一激活状态管理：将激活状态从单个NavItem提升到NavBar组件，确保同一时间只有一个标签处于激活状态
• 避免children混淆：用component字段存储要渲染的组件，替代原有的children，避免和React内置的children属性冲突
• 修复语法错误：补全items数组中对象的逗号，避免JS语法报错
• 优化交互逻辑：阻止a标签的默认跳转行为，确保点击标签仅切换组件而不刷新页面
• 集中渲染组件：在NavBar中统一渲染当前激活的组件，符合标签栏“切换标签显示对应内容”的常规逻辑

内容的提问来源于stack exchange，提问作者program.exe