javascript - 无状态 React 组件是否可以进行 CSS 转换？

Question

我做了一些研究，据我所知，CSS 转换在 componentDidMount 期间得到应用。由于无状态组件没有任何生命周期方法，CSS 转换可以工作吗？我试过将它们与功能组件一起使用，但它们对我不起作用。

所以我只想验证它是否可行，或者我是否必须将它变成有状态组件。谢谢!

Answer 1

简而言之，我会说是!

当使用无状态组件时，你当前的 state/css 应该基于传入的 props。

在典型的 css 示例中，您可以通过添加或删除类、添加/删除元素等来切换 css 转换。

这是一个基本的例子:

function changeColor() {
  var element = document.querySelector('.divwithcolor');
  element.classList = element.classList.contains('amazingcolor') ? 'divwithcolor' : 'divwithcolor amazingcolor';
}

.divwithcolor {
  color: darkblue;
  transition: color .5s;
}

.amazingcolor {
  color: aqua;
}

<div class="divwithcolor">
  hello world!
</div>

<button type="button" onclick="changeColor()">Change color</button>

在一个真实的 React 示例中，您将有一个父组件，其状态发生变化并调用渲染函数。你的无状态组件应该用新的 Prop 重新渲染，这是你进行 css 转换的地方。

使用上面的示例，您只需根据传入的 Prop 切换 amazingcolor。

像这样:

...

var needsColor = this.props.isActive;
var colorClass = needsColor ? 'divwithcolor amazingcolor' : '';
return ( <div className="{colorClass}"> );

...