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

IT技术 javascript reactjs typescript functional-programming
2021-05-02 00:22:42

我有以下功能：

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>

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

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

2个回答

相反，出口，做的格式化函数，导出功能，使功能：

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在代码中使用来获取该格式化程序。

尝试按如下方式定义您的函数：

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")}/>
其它你可能感兴趣的问题
上一篇React - 使用条件渲染和 window.location.href 来更改背景图像 下一篇React Native 应用程序（在 iOS 上）的 UI 滞后且 fps 速率定期下降