使用超时在类中反应钩子

Question

我在 React 中很新...我有窗口显示几乎没有延迟的页面。

它是用钩子制成的：

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 });
};

我不知道。。。卡在那里...

Answer 1

您只需要在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>

Answer 2

在基于类的组件中，需要使用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);
}
...

检查 https://reactjs.org/docs/react-component.html#setstate