可选地将参数传递给正在传递的函数答案

【问题标题】：Optionally pass parameter to function being passed around可选地将参数传递给正在传递的函数
【发布时间】：2017-12-20 23:12:29
【问题描述】：

我有以下功能：

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>

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

我怎样才能有选择地将参数传递给我将要传递的函数？

【问题讨论】：

标签： javascript reactjs typescript functional-programming

【解决方案1】：

不要导出一个进行格式化的函数，而是导出一个制作函数的函数：

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

当您使用该函数时，您将插入一个调用到 makeFormatter()，并使用所需的格式（或不获取默认格式）。为方便起见，您当然可以预先制作几个不同的格式化函数：

var formatters = {
  mmddyyyy: makeFormatter("MM/DD/YYYY"),
  euro: makeFormatter("DD/MM/YYYY"),
  datetime: makeFormatter("MM/DD/YYYY hh:mm"),
  // etc
};

然后您可以在代码中使用formatters.mmddyyyy 来获取该格式化程序。

【讨论】：

残酷。我实际上已经实现了您刚刚建议的（我相信它被称为“currying”）解决方案，但无法让它适用于默认实例。对于默认情况，我将其称为format={dateFormatter} 而不是format={dateFormatter()}。添加() 后，它现在可以工作了。谢谢！

【解决方案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")}/>

【讨论】：