Question

我有以下功能：

export function dateFormatter(date: string) {
  return moment(date).format("MM/DD/YYYY");
}

我有一个React组件，我可以传递这样的函数：

<TableColumn field="endDate" format={dateFormatter}>End Date</TableColumn>

该组件调用这样的函数：

const { format, field } = column.props;
if (format) {
  return format(cell);
}
return cell;

所有这一切都很好。我现在想改变我的dateFormatter函数，以便我可以选择将参数传递给它。我不清楚如何做到这一点，因为如果我将引用更改为：

<TableColumn field="endDate" format={dateFormatter("MM/YY")}>End Date</TableColumn>

它会将该格式作为日期传递给我的函数。

我如何可选地将参数传递给我将传递的函数？

Answer 1

不是导出执行格式化的函数，而是导出生成函数的函数：

export function makeFormatter(format: string) {
  return function(date: string) {
    return moment(date).format(format || "MM/DD/YYYY");
  };
}

当您使用该功能时，您将使用所需的格式向<{1}}插入调用（或者无需获取默认值）。您当然可以为方便起见预先制作几种不同的格式化功能：

makeFormatter()

然后，您可以在代码中使用var formatters = { mmddyyyy: makeFormatter("MM/DD/YYYY"), euro: makeFormatter("DD/MM/YYYY"), datetime: makeFormatter("MM/DD/YYYY hh:mm"), // etc };来获取该格式化程序。

Answer 2

尝试按如下方式定义您的功能：

export function dateFormatter(format: string) {
  return (date: string = "MM/DD/YYYY") => moment(date).format(format);
}

它将返回一个返回日期的函数，默认值为“MM / DD / YYYY”。

因此，您的组件将使用此类

<TableColumn fromat={dateFormatter()}/>

或

<TableColumn fromat={dateFormatter("MM/DD")}/>

可选择将参数传递给传递的函数

2 个答案: