Material UI中点击触发组件无刷新展示的功能名称是什么？

首先直接给结论：仅靠独立的按钮组件没法直接实现你要的效果，你找的对应功能是Material UI的「选项卡（Tabs）」组件，完全匹配你描述的点击标签切换对应内容、不刷新页面其余部分的交互需求。

实现说明 #

• 官方原生的Tabs组件是组合式用法，需要搭配Tab（即可点击的选项头）、TabPanel（对应每个选项的内容容器）三个配套模块使用，自带激活态样式、键盘操作支持、无障碍属性，点击切换的时候只会更新内容面板区域的显示，页面其余组件完全不受影响，不会触发整页刷新或者无关组件重渲染。
• 如果你非要用Button组件自己拼也能实现，但是要额外写很多逻辑：需要自己用useState维护当前选中的选项索引，给每个按钮绑定点击事件更新索引值，再通过条件渲染控制对应内容块的显示隐藏，这种方式要自己处理激活样式、边界逻辑，远不如直接用现成的Tabs组件效率高。

最小可运行代码示例 #

核心实现代码如下，直接替换你自己的业务内容即可：

import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

// 选项对应内容容器组件
function TabPanel(props) {
  const { children, value, index, ...rest } = props;
  return (
    <div role="tabpanel" hidden={value !== index} {...rest}>
      {value === index && (
        <Box sx={{ padding: 2 }}>
          <Typography component="div">{children}</Typography>
        </Box>
      )}
    </div>
  );
}

export default function MarketDemo() {
  // 记录当前激活的选项索引，默认选中第一个选项
  const [activeTab, setActiveTab] = React.useState(0);

  const handleTabChange = (e, newIndex) => {
    setActiveTab(newIndex);
  };

  return (
    <Box sx={{ width: '100%' }}>
      {/* 选项栏区域 */}
      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <Tabs value={activeTab} onChange={handleTabChange}>
          <Tab label="选项1" />
          <Tab label="选项2" />
          <Tab label="选项3" />
        </Tabs>
      </Box>
      {/* 各选项对应内容区域 */}
      <TabPanel value={activeTab} index={0}>
        {/* 这里替换成选项1对应的市场摘要内容 */}
        选项1的市场摘要内容
      </TabPanel>
      <TabPanel value={activeTab} index={1}>
        选项2对应的内容
      </TabPanel>
      <TabPanel value={activeTab} index={2}>
        选项3对应的内容
      </TabPanel>
    </Box>
  );
}

这个实现是React状态驱动的局部更新，只有TabPanel内部的内容会随选中状态切换显示，页面上其他和activeTab状态无关的组件，不会触发重渲染，完全满足你“其余组件无需刷新”的要求。

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