React中通过state传递组件实现标签页功能的渲染问题

React 支持通过 state 传递组件，但<{chosenTab}/>属于非法JSX语法：JSX的标签位在编译阶段就要求是明确的原生标签名或组件引用，不支持直接嵌入运行时变量作为标签名。你当前代码中chosenTab存储的是字符串类型的组件名称，直接套尖括号无法被正确解析。

推荐实现方式 #

方案1：state直接存储组件引用（最简单场景适用） #

直接将组件本身作为state值存储，不要存组件名字符串，渲染时将传入的组件赋值给大写开头的变量即可正常渲染（JSX规则：小写开头的标签会被识别为原生HTML元素，大写开头才会被识别为自定义组件）。

App.js 代码示例：

import { useState } from 'react'
import Main from './Main'
// 导入所有标签页组件
import HomeTab from './tabs/Home'
import ProfileTab from './tabs/Profile'
import SettingTab from './tabs/Setting'

function App() {
  // 默认选中首页组件
  const [chosenTab, setChosenTab] = useState(HomeTab)

  return (
    <>
      <div className="tab-bar">
        <button onClick={() => setChosenTab(HomeTab)}>首页</button>
        <button onClick={() => setChosenTab(ProfileTab)}>个人中心</button>
        <button onClick={() => setChosenTab(SettingTab)}>设置</button>
      </div>
      <Main chosenTab={chosenTab} />
    </>
  )
}

export default App

Main.js 代码示例：

const Main = ({ chosenTab: ChosenTab }) => {
  // 增加空值兜底，避免未选中标签时渲染报错
  return ChosenTab ? <ChosenTab /> : null
}

export default Main

方案2：映射表匹配（适合需要持久化标签状态的场景） #

如果你需要把当前激活标签存到本地缓存、URL参数中（只能存字符串标识的场景），可以提前建立字符串标识和组件引用的映射关系，通过标识找到对应组件再渲染。

App.js 代码示例：

import { useState } from 'react'
import Main from './Main'
import HomeTab from './tabs/Home'
import ProfileTab from './tabs/Profile'
import SettingTab from './tabs/Setting'

// 字符串和组件的映射表
const TAB_COMPONENT_MAP = {
  home: HomeTab,
  profile: ProfileTab,
  setting: SettingTab
}

function App() {
  // 存储标签的字符串标识
  const [chosenTabKey, setChosenTabKey] = useState('home')
  // 通过key找到对应组件
  const currentTab = TAB_COMPONENT_MAP[chosenTabKey]

  return (
    <>
      <div className="tab-bar">
        <button onClick={() => setChosenTabKey('home')}>首页</button>
        <button onClick={() => setChosenTabKey('profile')}>个人中心</button>
        <button onClick={() => setChosenTabKey('setting')}>设置</button>
      </div>
      <Main chosenTab={currentTab} />
    </>
  )
}

export default App

注意事项 #

• 不要试图直接通过字符串组件名自动渲染组件，React无法全局匹配你手动导入的组件，必须显式建立引用关系
• 动态渲染组件时如果需要保留各标签页的内部状态，可以给组件传入固定唯一的key属性，避免切换时组件被卸载重挂
• 如果标签页较多，可以结合React.lazy和Suspense实现组件按需加载，减少首屏体积

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