反应.js。 (react-countdown-now) 如何从另一个组件传递方法上的链接？答案

【问题标题】：React.js. (react-countdown-now) How to pass a link on method from from another component?反应.js。 (react-countdown-now) 如何从另一个组件传递方法上的链接？
【发布时间】：2018-03-01 19:41:32
【问题描述】：

在下面的课程中，我使用这个包来实现倒数计时器： https://www.npmjs.com/package/react-countdown-now#renderer。我的班级有方法“this.props.clearCookies()”，我需要在计时器结束时调用它。提供属性“rerenderer”以访问变量“completed”并期望输入函数。但是 this.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} /> 
        }
    }
}

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

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)
}

【讨论】：