更正语法,以使用箭头功能在render()中应用方法

时间:2019-03-02 13:32:34

标签: reactjs callback arguments date-formatting

我在Stackoverflow上发现了这个great method,可以将持续时间从ss转换为hh.mm.ss,我试图在页面的render()部分中调用它。许多尝试,但尚未成功。我想我在arrow函数的语法中缺少了一些内容,但是找不到。

这是我为自己的目的略加修改的方法:

formatTime(duration) {
    d = Number(duration);
    var h = Math.floor(d / 3600);
    var m = Math.floor(d % 3600 / 60);
    var s = Math.floor(d % 3600 % 60);

    var hDisplay = h > 0 ? h + (h == 1 ? " hour, " : " hours, ") : "";
    var mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " minutes, ") : "";
    var sDisplay = s > 0 ? s + (s == 1 ? " second" : " seconds") : "";
    return hDisplay + mDisplay + sDisplay;
    }

这是我的render()部分,我想在其中调用formatTime(),并将song.duration作为方法(full code here)的参数传递:

render() {
     return (

//[...] 

     <td {() => this.formatTime(song.duration)}> 
     {formatTime(song.duration)} </td>

//[...] 

}

1 个答案:

答案 0 :(得分:0)

这样写:

<td> {this.formatTime(song.duration)} </td>

由于以下原因:

1-这是一个类方法,因此您需要使用this.functionName()来访问该函数。

2-您通常正在调用该函数,并且它返回要渲染的某些内容/值,因此不需要箭头功能。


检查此答案以获取有关when javascript bind or arrow function is necessary

的更多详细信息