Question

我做了一些研究，从我可以收集的内容中，在componentDidMount期间应用了CSS转换。由于无状态组件没有任何生命周期方法，CSS转换是否可以工作？我已尝试将它们与功能组件一起使用，但它们并不适用于我。

所以我只想验证它是否可能，或者我是否必须将其变为有状态组件。谢谢！

Answer 1

是的，可能。对无状态组件也可以进行Css转换。安装时，Css属性会附加到无状态组件。因此，使用css处理的转换将在组件的整个生命周期内保持活动状态。

Answer 2

简而言之，我会说yes！

使用无状态组件时，您当前的状态/ css应该基于传入的道具。

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

这是一个基本的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

<div class="divwithcolor">
  hello world!
</div>

<button type="button" onclick="changeColor()">Change color</button>

＆＃13;

在一个真实的React示例中，您将拥有一个父组件，其状态发生了变化，并且调用了渲染函数。您的无状态组件应该使用新的道具重新渲染，这是您进行css过渡的地方。

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

这样的事情：

...

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

...

CSS无法通过无状态React组件转换吗？

2 个答案: