React/Next.js中如何实现每次调用都触发div动画效果

问题根因 #

你当前的写法是直接把组件函数存入content状态，React会复用已有的DOM节点结构，而你的<Section>标签的动画默认只在组件首次挂载时触发，后续切换内容时不会重新触发挂载流程，因此动画不会重复执行。

解决方案 #

你不需要额外使用useEffect，只要调整状态存储逻辑+给内容组件绑定唯一key属性即可实现需求：React检测到key变化时会自动卸载旧组件、挂载新组件，既会重新触发入场动画，也会自动清理旧组件占用的内存。

修改后的参考代码如下：

// 存储当前选中的进度条id，而不是直接存储组件
const [activeBarId, setActiveBarId] = useState(null);

// 时间线部分，点击时赋值对应id
<div>
    <Bar1 onClick={() => setActiveBarId('bar1')}/>
    <Bar2 onClick={() => setActiveBarId('bar2')}/>
</div>

// 内容展示部分，根据id渲染对应组件，绑定和id一致的key
<div>
  {activeBarId === 'bar1' && <BarContent_1 key="bar1" />}
  {activeBarId === 'bar2' && <BarContent_2 key="bar2" />}
</div>

// 进度条对应内容组件保持不变即可
const BarContent_1 = () => {
    return (
        <Section>
           Content of bar 1
        </Section>
    )
}
const BarContent_2 = () => {
    return (
        <Section>
           Content of bar 2
        </Section>
    )
}

补充说明 #

如果你的进度条数量比较多，也可以提前把id和组件的映射关系存在对象里，简化渲染部分的判断逻辑：

const barContentMap = {
  bar1: BarContent_1,
  bar2: BarContent_2
}

// 渲染部分可以简化为
<div>
  {activeBarId && (() => {
    const Content = barContentMap[activeBarId];
    return <Content key={activeBarId} />
  })()}
</div>

内容的提问来源于stack exchange，提问作者Rodrigo Yañez