使用箭头函数在 render () 中应用方法的正确语法

Question

我在 Whosebug 上发现这个可以将持续时间从 ss 转换为 hh.mm.ss，我试图在页面的 render () 部分调用它。多次尝试，但尚未成功。我想我在箭头函数的语法中遗漏了一些东西，但找不到是什么。

这是我为了我的目的稍微编辑的方法：

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>

//[...] 

}

Answer 1

这样写：

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

由于以下原因：

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

2- 您通常调用该函数，它返回一些您想要呈现的 content/value，因此不需要箭头函数。

查看此答案以了解有关

的更多详细信息

使用箭头函数在 render () 中应用方法的正确语法

Correct syntax to apply a method within render () using arrow function

arguments

callback

date-formatting

reactjs