React单页应用实现菜单点击切换Content组件内容的方法

你可以通过状态提升的方式实现这个需求，把控制显示哪个组件的状态放到Content和IcoMenu的共同父组件（比如App组件）里，具体实现步骤如下：

1. 准备好需要切换的组件 #

先确保你已经创建了要切换到的组件，比如Resume组件：

// Resume.js
import React from 'react';

const Resume = () => {
  return <div>这是简历页面内容</div>;
};

export default Resume;

2. 改造共同父组件（以App为例） #

在父组件中维护当前要显示的组件状态，同时定义菜单点击的处理函数，把状态和函数传递给子组件：

// App.js
import React, { useState } from 'react';
import Content from './Content';
import IcoMenu from './IcoMenu';
import Home from './Home';
import Resume from './Resume';

function App() {
  // 初始化状态，默认显示Home组件
  const [currentComponent, setCurrentComponent] = useState(<Home />);

  // 处理菜单点击的函数
  const handleMenuClick = (componentId) => {
    switch(componentId) {
      case 'home':
        setCurrentComponent(<Home />);
        break;
      case 'resume':
        setCurrentComponent(<Resume />);
        break;
      // 可以添加更多case处理其他菜单按钮
      default:
        setCurrentComponent(<Home />);
    }
  };

  return (
    <div className="app-container">
      {/* 把点击处理函数传给IcoMenu */}
      <IcoMenu onMenuClick={handleMenuClick} />
      {/* 把当前要显示的组件传给Content */}
      <Content currentComponent={currentComponent} />
    </div>
  );
}

export default App;

3. 修改IcoMenu组件，添加点击事件 #

让IcoMenu接收父组件传过来的点击处理函数，给每个菜单按钮绑定点击事件：

// IcoMenu.js
const IcoMenu = ({ onMenuClick }) => {
  return (
    <div className="menu-contain">
      <div 
        id="home" 
        className="ico-menu"
        onClick={() => onMenuClick('home')}
      >首页</div>
      <div 
        id="resume" 
        className="ico-menu"
        onClick={() => onMenuClick('resume')}
      >简历</div>
    </div>
  );
};

export default IcoMenu;

4. 修改Content组件，渲染传入的组件 #

让Content接收父组件传过来的currentComponent，并渲染它：

// Content.js
import React from 'react';
import '../styles/content.css';

const Content = ({ currentComponent }) => {
  return (
    <div className='contain-content'>
      {currentComponent}
    </div>
  );
};

export default Content;

简单解释原理 #

• 状态提升：把原本分散在子组件的状态（当前显示哪个组件）放到共同父组件，这样两个子组件都能访问和修改这个状态。
• 父传子：通过props把状态和处理函数传递给子组件，IcoMenu触发点击时调用父组件的函数更新状态，Content根据最新的状态渲染对应的组件。

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