每次使用 React / Next.js 调用触发动画 div答案

【问题标题】：Trigger animated div each time is called with React / Next.js每次使用 React / Next.js 调用触发动画 div
【发布时间】：2022-01-08 08:29:42
【问题描述】：

我是 React 和 Next.js 的新手，我正在创建一个时间线，时间线有彩色条，如果按下，页面会在下面显示一个 div，其中包含有关每个条的信息。

我设法使用 useState 钩子使下面的内容出现和消失，因此每个栏的内容不会堆叠，我使用的是动画标签“Section”，并且仅在我第一次按下任何栏时，内容是动画，其余部分静态显示，我想知道是否可以使用 useEffect 钩子之类的东西来重新渲染每个内容 div 以便每次单击每个栏时都会出现动画，也可以擦除最后加载的 div 所以不会堆栈在浏览器内存上，我希望我能解释一下我 2 天前开始使用 React，感谢您抽出宝贵时间。

简化代码示例：

//useState hook
const [content, setContent] = useState(null);

//Timeline section
<div>
    <Bar1 onClick={() => setContent(BarContent_1)}/>
    <Bar2 onClick={() => setContent(BarContent_2)}/>
</div>

//Content display
<div>
    {content}
</div>

//Content of each bar, (<Section> div has the animation)
const BarContent_1 = () => {
    return (
        <Section>
           Content of bar 1
        </Section>
    )
}
const BarContent_2 = () => {
    return (
        <Section>
           Content of bar 2
        </Section>
    )
}

【问题讨论】：

你在使用数组对象吗？你.map()那个数组在屏幕上显示数据对吗？
您好，不，每个 Bar 对象都是从另一个组件导入的，其中每个 bar 都获取要在时间线部分设置的所有样式。还没有映射也没有数组，我想在开始减少代码之前弄清楚这个洞的想法！。

标签： javascript reactjs react-hooks next.js

【解决方案1】：

您可以使用useState 来切换元素上的classList 这是下面我所做的示例，在您的项目中我不知道您在做什么，但我会首先提出卡片示例作为您的默认值设置状态到卡片组件中的false，当您单击按钮时，将布尔值false 切换为true

就像() => setState(!state) 一样，它总是会设置相反状态的值

当你改变状态时组件总是会重新渲染并检查状态，你会在more info div 上做类似的事情，如果该状态为真，则显示more-info active，这意味着你的 div 将被显示

如果是false，它将消失

const Card1 = () => {
  const [showMore, setShowMore] = useState(false)

  return (
    <div className="card">
      <div>Daniel</div>
      <button onClick={() => setShowMore(!showMore)}>Show More</button>
      <div class={showMore ? "more-info active": "more-info"}>This is more info Daniel</div>
    </div>
  )
}

这也是我的 css 我在做什么

.more-info{
  opacity: 0;
  transition: 0.5s ease;
}
.active{
  opacity: 1
}

在开始时制作这样的东西很好，但我建议你使用数组对象到.map() 组件并在上面制作切换动画，祝你好运

我也很快在sandbox上做了工作示例

【讨论】：

非常感谢，由于我使用的结构，我无法将您完全相同的逻辑应用于我的代码，但是您使用条件给了我一个想法，这帮助我解决了它！我将在下面发布我采取的解决方案，再次感谢您的宝贵时间

【解决方案2】：

@callmenikk 给了我一个想法，即每次满足条件时使用条件来呈现我的样式化 div。

解决方案：

//useState hook
const [content, setContent] = useState(null);

//Conditional function 'Refresh'
const Refresh = ({children}) => {
        const active = content != setContent
        if (active) {
            return (
                <Section>
                    {children}
                </Section>
            )
        }
    }

//Timeline section
<div>
    <Bar1 onClick={() => setContent(BarContent_1)}/>
    <Bar2 onClick={() => setContent(BarContent_2)}/>
</div>

//Content display and wrapping the content in my Refresh function
<Refresh>
    {content}
</Refresh>

//Content of each bar, no need to wrap content in my styled (Section) tag since my Refresh button will
const BarContent_1 = () => {
    return (
        <div>
           Content of bar 1
        </div>
    )
}
const BarContent_2 = () => {
    return (
        <div>
           Content of bar 2
        </div>
    )
}

【讨论】：