Curried function where ES7 property initializers aren't enabled

问题

I have the following arrow function in a so called curried format, taken from this SO answer:

const getIntervals = n=> availability=> {}

I need to use it in a React component, written in ES6 syntax, that cannot handle ES7 property initializers due to the implementation.

"Normally" a function in a class context in React has this simple style:

myFunction () {}

But would I convert the getIntervals function to this style?

回答1:

Just define getIntervals as a regular method, but have it return your curried function:

class Example extends Component {
   getIntervals(n) {
      return (availability) => {

      }
   }
   render() {...}
}

回答2:

Cool to see my work referenced in another question. I'm happy it's working out for you.

@RobM has provided a (per usual) good answer for you but I'll give you another option.

First, it's not necessary for you to keep the function in curried format. Since this is a user-defined procedure, if it serves you better to have it take a tuple, you can make it so ! Converting it is as easy as … †

// curried form
const getIntervals = n=> availability=> { ... }

// uncurried form
const getIntervals = (n,availability)=> { ... }

Then when you call it

// curried form
getIntervals (30) (availability)

// changes to
getIntervals(30, availability)

I generally define functions in curried form, but it is by no means a requirement you must follow. In uncurried form, you could define it directly on your React component like so …

class Example extends Component
  getIntervals (n,availability) {
    // ...
  }
}

Or because getIntervals is a generic and pure function, there's no reason to embed all of its code inside the component. You can just as easily leave it totally separate

// curried
const getIntervals = n=> availability=> { ... }

// or choose uncurried
const getIntervals = (n,availability)=> { ... }

// call it from withint the class
class Example extends Component
  getIntervals (availability) {
    return getIntervals (this.props.intervalLength, availability)
  }
}

Or, now you might see how useless it is to have a wrapper function at all. It's more likely that the return value is going to be used in some other way, like in an event handler or some state mutation …

const getIntervals = (n,availability) => { ... }

class Example extends Component {
  // constructor ...
  onclick (event) {
    let intervals = getIntervals(this.props.intervalLength, this.state.availability)
    // do something with intervals
    console.log(intervals)
  }
  render () {
    return <button onClick={e=> onclick(e)}>show intervals</button>
  }    
}

Now getIntervals can leave this file altogether if you want. You could drop it in utils.js and import it

import {getIntervals} from './utils'

class Example extends Component {
  onclick (event) {
    let intervals = getIntervals(this.props.intervalLength, this.state.availability)
     // ...
  }
  // ...
}

I use this.props.intervalLength and this.state.availability as examples. I don't actually know how these two values are associated with the component. I leave that up to you ＾＿＾

† conversion from curried to uncurried procedure is generally simple, but you have to be careful in the event the curried procedure is a recursive one — in which case, you'd also have to update the recursive call to be in uncurried form as well.

I leave this as a footnote because I wrote getIntervals and conversion is simple in this particular scenario

来源：https://stackoverflow.com/questions/38880840/curried-function-where-es7-property-initializers-arent-enabled

标签

javascript

reactjs

ecmascript-6

arrow-functions