javascript - 如何使用柯里化(Currying)有条件地将数据传递给函数

Question

我对函数式编程有些陌生。这是我的 React 应用程序中的当前范例。我有一个通用组件，我正在向其中传递一个函数，该函数可以选择采用 placeholder 参数。

<TableColumn field="effectiveDate" format={dateFormatter} sortable>Start Date</TableColumn>
<TableColumn field="endDate" format={dateFormatter("No End Date")} sortable>End Date</TableColumn> 

我认为我需要使用柯里化(Currying)来实现我的目标(稍后我会谈到)。既然如此，我就这样定义了 dateFormatter:

export function dateFormatter(placeholder?: string) {
  return function (date: string) {
    const attributes: any = { value: date };
    if (placeholder) {
      attributes.placeholder = placeholder;
    }
    return <ShortDate {...attributes} />;
  };
}

然后，当我实际呈现我的表格时，我循环遍历每条记录并获取如下值:

getRecordValue(record: any, column: React.ReactElement<TableColumnProps>) {
    const { format, field } = column.props;
    const cell = field ? record[field] : "";
    if (format) {
      return format()(cell, record);
    }
    return cell;
}

我想要一个单一的 dateFormatter 函数，但能够选择性地传递一个 placeholder 并延迟执行。我该怎么做？

Answer 1

只需使用 Prop 。检查父级是否传递了某些 Prop ，在您的情况下是 format。

class App extends React.component{
  render(){
     <CustomComponent  format={dateFormatter("No End Date")}/>
  }
}

class CustomComponent extends React.component{
  constructor(props){
    super(props)
  }

  render(){
     <div>
       Your content maybe
       { this.props.format && this.props.format }
     </div>
  }
}