基于按钮点击切换渲染三个不同React组件的实现求助

你需要的是固定位置的按钮+点击切换组件+按钮文本随视图动态变化的功能，用React Hooks可以很简洁地实现。先指出你现有代码的几个核心问题，再给出完整实现：

现有代码的问题 #

1. 返回字符串HTML而非JSX：React组件需要返回JSX元素，直接返回字符串不会被解析成DOM
2. 缺少核心状态变量：没有定义active状态来跟踪当前视图，导致切换逻辑失效
3. 组件渲染逻辑错误：ActiveView返回的是函数而非组件实例，且内部函数的实现不符合React组件规范
4. 子组件未正确引入和使用：现有代码里的View1/View2/View3没有被整合到主组件中

完整实现方案 #

核心思路 #

• 用useState管理当前激活的视图状态
• 按钮放在父组件的固定定位容器中，确保切换视图时位置不变
• 根据当前视图动态生成按钮文本
• 基于状态条件渲染对应子组件

主组件代码（Original.jsx） #

import React, { useState } from 'react';
import View1 from './View1';
import View2 from './View2';
import View3 from './View3';

const Original = () => {
  // 初始化激活视图为View1（对应值1）
  const [activeView, setActiveView] = useState(1);

  // 根据当前视图获取按钮文本
  const getButtonTexts = () => {
    switch (activeView) {
      case 1:
        return { btn1: '切换到View2', btn2: '切换到View3' };
      case 2:
        return { btn1: '回到View1', btn2: '切换到View3' };
      case 3:
        return { btn1: '回到View1', btn2: '回到View2' };
      default:
        return { btn1: '按钮1', btn2: '按钮2' };
    }
  };

  const { btn1, btn2 } = getButtonTexts();

  // 渲染当前激活的子组件
  const renderActiveView = () => {
    switch (activeView) {
      case 1:
        return <View1 />;
      case 2:
        return <View2 />;
      case 3:
        return <View3 />;
      default:
        return <View1 />;
    }
  };

  return (
    <div style={{ position: 'relative', minHeight: '100vh' }}>
      {/* 固定位置的按钮容器，用CSS定位保持位置不变 */}
      <div style={{ position: 'fixed', top: '20px', left: '20px', zIndex: 100 }}>
        <button onClick={() => setActiveView(2)}>{btn1}</button>
        <button onClick={() => setActiveView(3)} style={{ marginLeft: '10px' }}>{btn2}</button>
      </div>
      {/* 动态切换的视图内容区，给顶部留空避免被按钮遮挡 */}
      <div style={{ paddingTop: '60px' }}>
        {renderActiveView()}
      </div>
    </div>
  );
};

export default Original;

子组件代码 #

View1.jsx

const View1 = () => {
  return <div>这是View1的专属内容</div>;
};
export default View1;

View2.jsx

const View2 = () => {
  return <div>这是View2的专属内容</div>;
};
export default View2;

View3.jsx

const View3 = () => {
  return <div>这是View3的专属内容</div>;
};
export default View3;

关键知识点解释 #

1. useState状态管理：useState(1)初始化当前视图为1，setActiveView用来更新状态，这是React函数组件中管理状态的基础方式
2. 固定定位按钮：通过CSS的position: fixed将按钮容器固定在页面指定位置，zIndex确保按钮始终在内容上方
3. 动态按钮文本：getButtonTexts函数根据当前activeView的值返回对应的按钮文本，避免维护多个独立的按钮状态
4. 条件渲染：renderActiveView函数根据状态返回对应的子组件，也可以用对象映射的方式简化（比如const viewMap = {1: <View1/>, 2: <View2/>, 3: <View3/>}，然后return viewMap[activeView]）

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