ReactJS中的会话计时器

Question

我需要组织通知，告诉用户他的会话将在几分钟后结束。对于这个页面后加载，我得到总会话时间，以及告诉我何时必须显示通知的参数（例如1000secs-session time和60-times，直到会话结束）来自api。我的理解我需要使用setTimeout方法组织一个计时器。但我无法意识到如何根据哲学反应来组织这种机制。怎么做？

Answer 1

在根组件中设置超时并显示通知。我不知道你如何得到会话时间，但我们假设会话时间可用。然后你可以做这样的事情（使用ES6）：

const React = require('react');
const PropTypes = require('prop-types');

export class Main extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state = {
        timerid: -1,
        sessionEndsSoon: false, 
    };
    this.getSessionTimeout = this.getSessionTimeout.bind(this);
  }

  componentDidMount()
  {
    this.setState({ timerid: this.getSessionTimeout() });
  }

  componentWillUnmount()
  {
    clearTimeout(this.state.timerid);
  }

  getSessionTimeout()
  {
      if (this.state.timerid)
      {
          clearTimeout(this.state.timerid);
      }
      timerid = setTimeout(() =>
      {
          this.setState({sessionEndsSoon : true});
      }, this.props.sessionTimeInMs);
      return timerid;
  }

  render()
  {
    if(this.state.sessionEndsSoon)
    {
      return (<p>Session ends soon</p>);
    }
    return (<p>session active</p>);
   }
}
Main.propTypes = {
  sessionTimeInMs: PropTypes.number.isRequired,
};

Main.defaultProps =
{
   sessionTimeInMs: 1000000,
};

此外，您可以通过ajax从后端获取会话时间并相应地更新超时。