Question

我试图使用css转换，但是当反应重新呈现一个组件时，它们会被忽略。让我们想象一下用例，其中我的render()函数输出如下内容：

<ul>
  <li className={this.state.path==="/menu1/" ? "active" : "inactive"}>
    menu 1
  </li>
  <li className={this.state.path==="/menu2/" ? "active" : "inactive"}>
    menu 2
  </li>
  <li className={this.state.path==="/menu3/" ? "active" : "inactive"}>
    menu 3
  </li>
</ul>

让我们想象一下：

.active将蓝色背景和动画设置为背景颜色
.inactive正在为背景颜色设置红色背景和动画

应用加载/ menu1处于活动状态。使用react路由器我更新状态，组件应该更新。当导航到新路线时（例如＆＃34; / menu2 /＆＃34;）一切正常，但是当重新渲染发生时，我的转换将被忽略。

我看到的唯一解决方案是使用componentDidUpdate修改DOM，但我不想直接操作DOM，所以我的问题是：

如何使用与css一起做出反应来正确地为元素设置动画？

Answer 1

正确的方法是使用css修饰符来应用不同的样式。

这意味着您的代码应如下所示：

<ul>
  <li className={`nav-item ${this.state.path==="/menu1/" ? "nav-item--active" : ""}`}>
    menu 1
  </li>
  <li className={`nav-item ${this.state.path==="/menu2/" ? "nav-item--active" : ""}`}>
    menu 2
  </li>
  <li className={`nav-item ${this.state.path==="/menu3/" ? "nav-item--active" : ""}`}>
    menu 3
  </li>
</ul>

假设您想要进行背景转换。您可以将过渡样式和初始背景颜色应用于.nav-item类。之后，您将为.nav-item--active添加仅更改背景颜色的规则。我认为通过这样做你将得到预期的结果。

css过渡被忽略，因为反应重新出现

1 个答案: