React.js。 （react-countdown-now）如何从另一个组件传递方法上的链接？

Question

在下面的课程中，我使用这个包来实现倒数计时器：https://www.npmjs.com/package/react-countdown-now#renderer。我的类有方法“this.props.clearCookies（）”，我需要在计时器结束时调用它。提供属性“rerenderer”来访问变量“completed”并期望输入函数。但是这个.props在输入函数中是不可用的。我很困惑，如何将链接传递给this.props.clearCookies（）呢？

import React from 'react';
import Countdown from 'react-countdown-now';


export default class TransactionPage extends React.Component {
    constructor(props){
        super(props)
    }

    renderer({ hours, minutes, seconds, completed }) {
        if (completed) { 
            // I need to run this.prop.clearCookies() here, but it's not available.
            // I need help to figure out how to invoke it
            this.props.clearCookies().bind(this)
            return 'Транзакция просрочена';
        } 
        else { return <span>Истекает через {hours}:{minutes}:{seconds}</span> }
    };

    render(){
        return ( 
        // Here! It's <Countdown /> from react-countdown-now. 
        // It provides a property "rerenderer" to change  representation of timer. Also "rerenderer" is a way to get access to variable "completed". 
        <Countdown date={this.props.dataStamp + 6000} renderer={ this.renderer } burn={this.props.burnCookies} /> 
        }
    }
}

不确定我写的标题是否正确，我不明白如何解释我的问题。

Answer 1

React-countdown-现在有onComplete函数https://www.npmjs.com/package/react-countdown-now#oncomplete

使用此函数调用this.props.clearCookies。

import React from 'react';
import Countdown from 'react-countdown-now';


export default class TransactionPage extends React.Component {
    constructor(props){
        super(props)
    }

    renderer({ hours, minutes, seconds, completed }) {
        if (completed) { 
            return 'Транзакция просрочена';
        } 
        else { return <span>Истекает через {hours}:{minutes}:{seconds}</span> }
    };

    render(){
        return ( 
        <Countdown 
            onComplete={() => this.props.clearCookies()}
            date={this.props.dataStamp + 6000} renderer={ this.renderer } burn={this.props.burnCookies} /> 
        }
    }
}

onComplete回调是this.props.clearCookies比renderer函数更好的地方，因为render函数只是映射（(props, state) => View），并且调用this.props.clearCookies会导致副作用

但是如果你想在渲染器中调用this.props.clearCookies，你应该绑定渲染器函数的上下文：

constructor(props){
    super(props)
    this.renderer = this.renderer.bind(this)
}

Answer 2

渲染器方法不绑定到组件实例。 this.props.clearCookies().bind(this)也没有任何意义。最简单的方法是在构造函数中添加this.renderer = this.renderer.bind(this)并删除实现中的.bind(this)。