React.js：如何在react-countdown-now的renderer中调用props方法？

Got it, let's work through how to get your clearCookies() method firing when the countdown finishes. The key issue here is making sure the renderer function has access to your component's this context (and thus this.props). Here are a few solid approaches:

1. 使用箭头函数作为renderer #

箭头函数会自动继承外层作用域的this，这是最简单直接的方式。在你的组件的render()方法里，直接把箭头函数传给renderer属性：

import Countdown from 'react-countdown-now';

class YourComponent extends React.Component {
  render() {
    return (
      <Countdown
        date={Date.now() + 60000} // 示例：1分钟倒计时
        renderer={({ completed }) => {
          if (completed) {
            // 这里可以直接访问this.props，因为箭头函数继承了组件的this
            this.props.clearCookies();
            return <div>倒计时结束，已清除Cookie！</div>;
          }
          // 渲染正常的倒计时内容（比如分秒显示）
          return <div>倒计时进行中...</div>;
        }}
      />
    );
  }
}

2. 提前绑定类方法（适合复杂渲染逻辑） #

如果你的倒计时渲染逻辑比较复杂，把它抽成单独的类方法会更清晰。这时候需要确保方法绑定了组件的this，有两种方式：

方式A：在constructor中绑定 #

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // 把renderCountdown方法的this绑定到组件实例
    this.renderCountdown = this.renderCountdown.bind(this);
  }

  renderCountdown({ completed }) {
    if (completed) {
      this.props.clearCookies();
      return <div>倒计时结束，已清除Cookie！</div>;
    }
    return <div>倒计时进行中...</div>;
  }

  render() {
    return (
      <Countdown
        date={Date.now() + 60000}
        renderer={this.renderCountdown}
      />
    );
  }
}

方式B：使用class fields箭头函数（无需constructor绑定） #

这是ES6+的写法，更简洁：

class YourComponent extends React.Component {
  // 用箭头函数定义类方法，自动绑定组件的this
  renderCountdown = ({ completed }) => {
    if (completed) {
      this.props.clearCookies();
      return <div>倒计时结束，已清除Cookie！</div>;
    }
    return <div>倒计时进行中...</div>;
  }

  render() {
    return (
      <Countdown
        date={Date.now() + 60000}
        renderer={this.renderCountdown}
      />
    );
  }
}

3. 闭包捕获props（备用方案） #

如果上面的方法都不适合，你还可以在render()里把clearCookies存到一个变量中，然后在renderer函数里直接调用这个变量：

render() {
  // 把props里的方法存到局部变量，renderer函数就能访问到
  const clearCookies = this.props.clearCookies;
  
  return (
    <Countdown
      date={Date.now() + 60000}
      renderer={({ completed }) => {
        if (completed) {
          clearCookies();
          return <div>倒计时结束，已清除Cookie！</div>;
        }
        return <div>倒计时进行中...</div>;
      }}
    />
  );
}

所有这些方法都能让你在倒计时完成时成功调用this.props.clearCookies()，选最适合你代码风格的就行～

内容的提问来源于stack exchange，提问作者Dmitry Klymenko