Question

var popup = React.render(
              <PopUp>
                <Countdown />
              </PopUp>,
              document.getElementById('popup')
            );

Countdown组件在弹出组件中呈现为{this.props.children}

如何调用倒计时组件的Stop方法？

Answer 1

我认为你应该做的是拥有另一个处理你应用程序所有状态的顶级组件，并且在你的情况下有一个回调功能＆＃39;停止倒计时＆＃39;将它传递给你的组件倒计时：

var popup = React.render(
              <PopUp>
                <Countdown handleStop={this.handleStop} />       
              </PopUp>,
              document.getElementById('popup')
            );

因此，现在在倒计时组件中，您可以在时间内调用 handleStop 功能。

Answer 2

您可以传入道具stopped，这样可以在错误时继续倒计时。

var stopped = true; // set value of stopped however you want
var popup = React.render(
  <PopUp>
    <Countdown stopped={stopped} />       
  </PopUp>,
  document.getElementById('popup')
);

在Countdown中，您可以在componentWillReceiveProps方法中检查已停止的值：

var Countdown = React.createClass({
    componentWillRecieveProps: function(nextProps){
      if (this.props.stopped == nextProps.stopped){
        return; // do nothing if the value has not changed
      }
      if (nextProps.stopped){
        //call stop timer here
      }
      else {
        //start the timer here
      }
    },
    //getInitialState, render, and other methods
});

调用子组件功能

2 个答案: