如何在react js app的标签页中添加标签组件和加载页面？

在React.js应用的标签页中添加标签组件和加载页面可以通过以下步骤实现：

首先，确保你已经安装了React.js和相关的依赖。
创建一个标签组件，可以使用React的函数组件或者类组件来实现。这个组件可以包含一个标签导航栏和一个用于显示标签内容的区域。
在标签导航栏中，你可以使用React的状态管理来追踪当前选中的标签。可以使用useState钩子或者类组件的state来实现。
定义一个标签切换的处理函数，当用户点击某个标签时，更新当前选中的标签状态。
在标签内容区域中，根据当前选中的标签状态，动态加载对应的页面组件。可以使用React的条件渲染来实现，例如使用条件语句或者switch语句根据选中的标签来渲染不同的页面组件。
在每个页面组件中，你可以编写相应的业务逻辑和UI组件。

以下是一个简单的示例代码：

import React, { useState } from 'react';

const TabComponent = () => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

  const renderTabContent = () => {
    switch (activeTab) {
      case 0:
        return <HomePage />;
      case 1:
        return <AboutPage />;
      case 2:
        return <ContactPage />;
      default:
        return null;
    }
  };

  return (
    <div>
      <ul>
        <li onClick={() => handleTabClick(0)}>Home</li>
        <li onClick={() => handleTabClick(1)}>About</li>
        <li onClick={() => handleTabClick(2)}>Contact</li>
      </ul>
      <div>{renderTabContent()}</div>
    </div>
  );
};

const HomePage = () => {
  return <h1>Home Page</h1>;
};

const AboutPage = () => {
  return <h1>About Page</h1>;
};

const ContactPage = () => {
  return <h1>Contact Page</h1>;
};

export default TabComponent;

在这个示例中，TabComponent是一个标签组件，它包含一个ul元素作为标签导航栏，以及一个div元素用于显示标签内容。通过useState钩子来追踪当前选中的标签，通过handleTabClick函数来更新选中的标签状态。根据选中的标签状态，使用switch语句来渲染对应的页面组件。

你可以根据实际需求，自定义标签和页面组件的内容和样式。这只是一个简单的示例，你可以根据自己的项目需求进行扩展和优化。

关于React.js的更多信息和学习资源，你可以参考腾讯云的React.js产品介绍页面：React.js产品介绍