如何根据选中菜单项在主内容DIV中加载不同React组件

核心思路 #

用React的状态记录当前选中的菜单类型，根据状态在theCONTENT区域渲染对应的独立组件，完全不用dangerouslyRenderInnerHTML，逻辑清晰且符合React规范。

分步操作（所有修改都在主页面文件，比如MainPage.js） #

1. 导入所有独立组件

先把你封装好的MusicStuff、MovieStuff、TVShowStuff组件导入到主页面：

import MusicStuff from './path/to/MusicStuff'; // 替换成你的组件实际路径
import MovieStuff from './path/to/MovieStuff';
import TVShowStuff from './path/to/TVShowStuff';

2. 添加状态管理（用React Hooks，比类组件更简洁）

在主组件里用useState定义状态，记录当前激活的菜单：

import { useState } from 'react';

function MainPage() {
  // 初始状态设为null，默认不渲染任何组件；也可以设为'music'默认显示音乐内容
  const [activeContent, setActiveContent] = useState(null);
  
  // 后续逻辑写在这里
}

3. 编写菜单点击的切换函数

写一个函数，点击菜单按钮时更新状态：

const handleMenuClick = (contentType) => {
  setActiveContent(contentType);
};

4. 渲染菜单按钮和内容区域

把菜单按钮和theCONTENT区域写进组件的返回内容：

return (
  <div className="main-page">
    {/* 主菜单按钮 */}
    <div className="main-menu">
      <button onClick={() => handleMenuClick('music')}>Music</button>
      <button onClick={() => handleMenuClick('movies')}>Movies</button>
      <button onClick={() => handleMenuClick('shows')}>Shows</button>
    </div>

    {/* theCONTENT 区域 */}
    <div id="theCONTENT" className="content-area">
      {/* 根据activeContent的值渲染对应组件 */}
      {activeContent === 'music' && <MusicStuff />}
      {activeContent === 'movies' && <MovieStuff />}
      {activeContent === 'shows' && <TVShowStuff />}
      {/* 可选：默认提示 */}
      {activeContent === null && <p>请选择一个分类查看内容</p>}
    </div>
  </div>
);

组件文件无需修改 #

你之前写的MovieStuff等独立组件保持原样即可，只要确保导出正确（export default MovieStuff），主页面能正确导入就可以正常使用。

关键说明 #

• 状态activeContent相当于一个"开关"，点击菜单时切换开关的值，React会自动重新渲染对应组件
• 条件渲染{activeContent === 'movies' && <MovieStuff />}是React的标准写法，比dangerouslyRenderInnerHTML安全且易维护
• 组件放在单独文件完全不影响，只要导入路径正确就可以正常使用

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