Question

我有一个简单的React应用程序，我想在其中使用 react-timeago npm模块

我看了看文档，那里有我要使用的功能

formatter (optional)
A function that takes four arguments:

value : An integer value, already rounded off
unit : A string representing the unit in english. This could be one of:
'second'
'minute'
'hour'
'day'
'week'
'month'
'year'
suffix : A string. This can be one of
'ago'
'from now'
epochSeconds: The result of Date.now() or the result of a custom now prop.
nextFormatter: A function that takes no arguments and gives you the result of the defaultFormatter using the same arguments above.

这在文档中显示为道具，但是我如何将参数作为道具传递给函数？

     <TimeAgo date={this.state.time} formatter={/*how can i pass in the arguments to the function */} live={true}/>

我已经在这里调用了组件，但是我不确定如何将适当的道具传递给组件？

Answer 1

您为formatter道具提供了一个函数，react-timeago将在内部使用。

示例

<TimeAgo
  date={this.state.time}
  formatter={(value, unit, suffix) => `${value} ${unit} ${suffix}`}
  live={true}
/>

Answer 2

文档说formatter包含一个函数，因此您必须为其提供其预定义的函数之一，或者您自己定义一个函数。

重要的是，这是一个回调函数，因此您无需调用它或发送参数。 <TimeAgo ...组件将使用文档中列出的参数调用该函数，以产生最终的格式化字符串。

格式化程序功能之一：

import frenchStrings from 'react-timeago/lib/language-strings/fr'
import buildFormatter from 'react-timeago/lib/formatters/buildFormatter'

将道具从NPM包传递给功能

2 个答案: