I'm somewhat new to functional programming. Here is my current paradigm from my React app. I have a generic component into which I'm passing a function which can optionally take a placeholder
argument.
<TableColumn field="effectiveDate" format={dateFormatter} sortable>Start Date</TableColumn>
<TableColumn field="endDate" format={dateFormatter("No End Date")} sortable>End Date</TableColumn>
I believe I need to use currying to acheive my goal (which I'll speak to shortly). That being the case, I've defined dateFormatter
like this:
export function dateFormatter(placeholder?: string) {
return function (date: string) {
const attributes: any = { value: date };
if (placeholder) {
attributes.placeholder = placeholder;
}
return <ShortDate {...attributes} />;
};
}
Then, when I actually render my table, I loop through each record and get the value like this:
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;
}
I want to have a single dateFormatter
function, but be able to optionally pass a placeholder
and defer execution. How can I do this?
just use props. Check if the parrent has passed certain props, in your case is 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>
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.