Question

我正在尝试使用react：

显示闪烁的文本

class BlinkLable extends React.Component {
    constructor(props) {
    super(props);
    this.state = {showlabel: true,
                 label: this.props.label
                 };
    this.myFunction = this.myFunction.bind(this);

}

myFunction()  
{
    var sLb = ! (this.state.showlabel);
    this.setState({showlabel: sLb});
}

componentDidMount() {
    setTimeout(this.myFunction, 3000)
 }

render() {
    return (
      <div>
        {(this.state.showlabel)?this.state.label:''}
      </div>
     );
    }
}

ReactDOM.render(
   <BlinkLable label='MY MESSAGE'/>,
      document.getElementById('labelId')
);

然而，在显示我的消息之后，这条消息消失了，再也没有回来。可能是什么问题？

Answer 1

您需要使用setInterval()方法。

componentDidMount() {
    setInterval(this.myFunction, 3000)
 }

更多信息：'setInterval' vs 'setTimeout'

Answer 2

将此功能修改为：

myFunction()  
{
    this.setState((prevState) => {
      return { 
        showlabel: !prevState.showLabel
      }
    });
}

使用状态和setTimeOut使用React闪烁文本

2 个答案: