在 React 中从 state 中借用属性的值答案

【问题标题】：Borrowing a property's value from state in React在 React 中从 state 中借用属性的值
【发布时间】：2016-04-01 04:06:16
【问题描述】：

我不知道我的措辞是否正确，请耐心等待。基本上，我有一个组件是一个功能计数器（增量或减量）。另一个组件是一个从（默认）25 到 0 倒计时的计时器。

以前，我将计时器的值设置为 25，但我试图让 计时器随着计数器值的变化而变化，并且当用户按下“开始”时按钮，计时器将从计数器设置的任何数字开始倒计时。

我可以让组件单独工作，但不能一起工作。我尝试将this.state.currentCount 设置为this.props.time 的值，然后更改this.state.currentCount 的值，但没有运气。要么计时器不让步，要么它不反映计数器的值。

不确定我是否应该改用componentWillReceiveProps。

任何帮助将不胜感激。如果有帮助的话，底部有一个屏幕截图。

会话组件：

const Session = React.createClass({

  getInitialState: function() {
    return {
      minutes: 25,
      seconds: 0
    };
  },

  increment: function() {
    this.setState({ minutes: this.state.minutes + 1 });
  },

  decrement: function() {
    this.setState({ minutes: this.state.minutes - 1 });
  },

  timeToString: function(time) {
    return time + ':00';
  },

  render: function() {
    return (
      <section>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        {this.state.minutes}
        <Clock time={this.state.minutes}/>
      </section>
    );
  }

});

module.exports = Session;

时钟组件：

const Clock = React.createClass({

  getInitialState: function() {
    return { currentCount: this.props.time };
  },

  startTimer: function() {
    var intervalId = setInterval(this.timer, 1000);
    this.setState({ intervalId: intervalId });
  },

  pauseTimer: function() {
    clearInterval(this.state.intervalId);
    this.setState({ intervalId: this.props.time });
  },

  timer: function() {
    var newCount = this.state.currentCount - 1;
    if (newCount >= 0) {
      this.setState({ currentCount: newCount });
    } else {
      clearInterval(this.state.intervalId);
    }
  },

  render: function() {
    return (
      <section>
        <button onClick={this.startTimer}>Start</button>
        <button onClick={this.pauseTimer}>Pause</button>
        {this.props.time}
        <br></br>
        {this.state.currentCount}
      </section>
    );
  }

});

module.exports = Clock;

【问题讨论】：

Js-fiddle 会很棒
我一直在努力解决这个问题。让 React 的所有部分在 JSfiddle 中工作比应有的困难。

标签： javascript reactjs components

【解决方案1】：

getInitialState 仅在组件首次初始化时运行，依此类推从父组件更新它不会运行该功能。你是对的因为您想使用生命周期事件之一，在这种情况下 componentWillReceiveProps 听起来是最合适的，因为你可以 setState 那里，你不需要等待组件渲染（否则你会使用componentDidUpdate)。

我没有检查过这段代码，但我认为它应该适用于这个添加：

const Clock = React.createClass({

    ...

    componentWillReceiveProps: function(nextProps) {
        // Perhaps pause timer here as well?
        this.setState({
            currentCount: nextProps.time
        })
    },

    ...

});

【讨论】：

我感觉其中一个会做到这一点，但我对 React 生命周期的工作方式仍然很陌生。谢谢！

【解决方案2】：

因为您的计时器取决于Start 按钮。如果你在startTimer方法中设置currentCount的状态就好了。

startTimer: function() {
  if(this.state.intervalId)
   clearInterval(this.state.intervalId); //clear the running interval

  this.setState({ currentCount: this.props.time }); // reset currentcount
  var intervalId = setInterval(this.timer, 1000);
  this.setState({ intervalId: intervalId });
},

【讨论】：