css - 使用 ES6 时如何在 React 组件中应用 css？

Question

我想应用简单的淡入动画，似乎唯一的方法是使用使用 css 类的 ReactCSSTransitionGroup。谁能帮忙，如何在 es6 中实现它。

我不确定在使用 es6 语法时如何将 css 类应用到我的 React 组件。谢谢

Answer 1

I'm not sure how apply css classes to my react component while using es6 syntax

我假设您的意思是如何在转换期间修改类名，但如果不添加 className 属性到组件元素？你是否使用 ES6 完全无关紧要。在 JSX 中:

<div className="my-div"></div>

在 JS 中:

React.createElement('div', { className: 'my-div' })

want to apply simple fadeIn animation, and it seems like only way to this is by using ReactCSSTransitionGroup which uses css classes. can anyone help, how implement it in es6.

ES6 与 CSS 和 CSS 过渡组插件无关。

如果只是淡入，并且您的元素刚刚被引入 DOM，您可能不需要 CSS 过渡组；如果可以，只需在类上使用 CSS 过渡。

但是 React 的问题，也就是 CSS transitions 解决的问题是，对于 React，状态之间的动画不会像其他情况下那样工作(通常它们根本不起作用，因为 DOM 被销毁并重建).从字面上看，所有过渡组(它只是一个通用包装器组件)所做的就是添加(最多)四个类，它们在您指定的时间打开/关闭(.mycomponent-enter， .mycomponent-enter-active, .mycomponent-leave, .mycomponent-leave-active).这使您可以通过 CSS 应用动画。您根据 API 应用属性 - 需要 key 否则 React 会向您尖叫并且它不会工作，并且需要设置 times enter 和离开(否则不会有任何动画，因为没有时间段)。

我不能给你更多，因为你没有指定任何关于你尝试过的东西。我只想强调，您描述的方式实际上与 ES6 甚至 Javascript 无关；如果您想纯粹使用 JS 来应用动画，那就不同了。