未启用 ES7 属性初始化器的 Curried 函数

Question

我在 so called curried format, taken from 中有以下箭头函数：

const getIntervals = n=> availability=> {}

我需要在用 ES6 语法编写的 React 组件中使用它，由于 the implementation.

而无法处理 ES7 属性初始化器

"Normally" React 中 class 上下文中的函数具有这种简单的样式：

myFunction () {}

但是我可以将 getIntervals 函数转换为这种样式吗？

Answer 1

只需将 getIntervals 定义为常规方法，但将其 return 柯里化函数：

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

      }
   }
   render() {...}
}

Answer 2

很高兴看到另一个问题引用了我的作品。我很高兴它对你有用。

@RobM 为您提供了一个（通常）好的答案，但我会给您另一个选择。

首先，您没有必要将函数保持为柯里化格式。由于这是一个用户定义的过程，如果让它接受一个元组对你更好，你可以这样做！转换它就像……一样简单 †

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

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

然后调用的时候

// curried form
getIntervals (30) (availability)

// changes to
getIntervals(30, availability)

我通常以柯里化形式定义函数，但这绝不是您必须遵循的要求。在非柯里化形式中，您可以像这样直接在 React 组件上定义它……

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

或者因为 getIntervals 是一个通用的纯函数，没有理由将其所有代码嵌入到组件中。你可以很容易地把它完全分开

// 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)
  }
}

或者，现在您可能会明白拥有包装函数是多么无用。 return 值更有可能以其他方式使用，例如在事件处理程序或某些状态突变中......

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>
  }    
}

现在 getIntervals 如果您愿意，可以完全保留此文件。您可以将其放入 utils.js 并导入它

import {getIntervals} from './utils'

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

我使用 this.props.intervalLength 和 this.state.availability 作为示例。我实际上并不知道这两个值是如何与组件相关联的。就交给你了＿＿＿

† 从柯里化过程到非柯里化过程的转换通常很简单，但如果柯里化过程是递归过程，则必须小心——在这种情况下，您还必须将递归调用更新为非咖喱形式也是如此。

我把它留作脚注，因为我写了 getIntervals 并且在这种特定情况下转换很简单

未启用 ES7 属性初始化器的 Curried 函数

Curried function where ES7 property initializers aren't enabled

javascript

reactjs

ecmascript-6

arrow-functions

未启用 ES7 属性 初始化器的 Curried 函数

Curried function where ES7 property initializers aren't enabled

javascript

reactjs

ecmascript-6

arrow-functions

未启用 ES7 属性初始化器的 Curried 函数