我有以下功能:
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>
它会将该格式作为日期传递给我的函数。
我如何可选地将参数传递给我将传递的函数?
不是导出执行格式化的函数,而是导出一个函数函数:
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")}/>