在类中使用超时的React Hooks
我对React很陌生...我有窗口显示的页面，延迟很小..
它是用Hooks制作的：
export default function LoginPage() {
const [cardAnimaton, setCardAnimation] = React.useState('cardHidden');
setTimeout(function() {
setCardAnimation('');
}, 700);
<form>
<Card login className={classes[cardAnimaton]}>现在，我希望在该页面中使用类，并希望保留相同的效果。
所以我试着这样做：
export default class LoginPage extends React.Component {
constructor(props) {
super(props);
this.state = {
cardHidden: true,
};
}
componentDidMount() {
this.timeout = setTimeout(() => {
this.setCardAnimation('');
}, 700);
}
setCardAnimation = () => {
this.cardAnimaton({ cardHidden: false });
};我不知道。卡在那里了..。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-23 10:12:33
你只需要在componentDidMount中设置你的cardHidden: false，然后你就可以基于cardHidden状态添加动画了。
这是一个工作演示，我使用cardHidden状态在屏幕上显示或隐藏不同的文本，您可以使用此方法添加不同的动画。
只需单击Run code snippet即可查看其工作原理
class LoginPage extends React.Component {
constructor(props) {
super(props);
this.state = {
cardHidden: true,
};
}
componentDidMount() {
this.timeout = setTimeout(() => {
this.setState({
cardHidden: false
});
}, 700);
}
render() {
if(this.state.cardHidden){
return <div>I'm Hidden</div>
} else {
return <div>Haha, I'm Visible</div>
}
}
}
const rootDiv = document.getElementById('root');
ReactDOM.render(<LoginPage />, rootDiv);<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
Stack Overflow用户
发布于 2020-05-23 09:11:43
在基于类的组件中，您需要使用this.setState来更新状态。
export default class LoginPage extends React.Component {
constructor(props) {
super(props);
this.state = {
cardHidden: true,
};
}
componentDidMount() {
this.timeout = setTimeout(() => {
this.setState({ cardHidden: false });
}, 700);
}
...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61969725
复制相关文章
相似问题
new导航挂载一个屏幕，然后不接受从另一个屏幕再次传递的新params
如何在putty中刷新整个屏幕
如何从主屏幕创建新屏幕？
如何在用户进入屏幕时自动重新加载或刷新整个屏幕。在react原生中
如何通过编程使用android应用程序捕获整个屏幕屏幕截图？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
