如何在同一位置带过渡效果轮流展示三个Typography组件的文本

核心思路是用状态记录当前展示的文本序号，定时器定期更新序号，条件渲染对应文本，天然满足同位置仅显示一个的要求。

• 先通过useState存储当前激活的文本索引，初始值为0对应第一个文本
• 用useEffect启动定时器，固定间隔更新索引，通过取余逻辑实现循环效果
• 组件卸载时清除定时器，避免内存泄漏

完整实现代码如下：

import { useState, useEffect } from 'react';
// 按你实际用的Typography组件来源导入即可，这里以MUI为例
import Typography from '@mui/material/Typography';

const CycleText = () => {
  const [currentIdx, setCurrentIdx] = useState(0);
  const totalCount = 3;

  useEffect(() => {
    // 切换间隔单位为毫秒，这里设的2秒，可自行调整
    const timer = setInterval(() => {
      setCurrentIdx(prev => (prev + 1) % totalCount);
    }, 2000);
    return () => clearInterval(timer);
  }, [totalCount]);

  return (
    <div>
      {currentIdx === 0 && <Typography>Welcome.</Typography>}
      {currentIdx === 1 && <Typography>Willkommen.</Typography>}
      {currentIdx === 2 && <Typography>Bem-vindo.</Typography>}
    </div>
  );
};

export default CycleText;

用取余%处理循环逻辑，后续如果要新增文本，只要修改totalCount的值、新增对应条件渲染的组件即可，无需修改切换逻辑。如果想要加淡入淡出的过渡效果，给外层div加opacity相关的CSS过渡即可，不用调整核心逻辑。

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