reactjs - 在 Recompose for React 中定义 withHandler 函数

Question

我查看的所有示例中，withHandlers 中实际调用的函数似乎是从 props 调用的函数，但我不知道该函数是如何定义的。这是 docs for humans 中的一个小例子.

compose(
  withState('count', 'setCount', 0),
  withHandlers({
    incrementCount: props => event => {
      event.preventDefault()
      props.setCount(props.count + 1)
    }
  })
)(ComponentToEnhance)

我的理解是，这将创建一个带有“状态”的 HOC 来跟踪计数。我可以通过使用定义的处理程序的操作来增加计数(例如 onClick={incrementCount})。

我的问题是，setCount实际定义在哪里......我正在想象类似的东西

function setCount(i) {
    return i+1;
}

既然是从 props 调用的，那么使用组件时是否必须将其作为 props 传入？我很困惑为什么 withState 需要知道状态更新程序名称，或者在这种情况下它是如何相关的。

它是否只是自动为您定义一个函数，该函数将用您传递给它的任何参数替换状态参数(如果是的话，捂脸......)

Answer 1

withHandlers 采用柯里化(Currying)/高阶函数，以便从其他 HOC(高阶组件)(例如 withSate)设置 props 或形成其用法。

增强组件示例:

import { compose } from 'recompose';
import React from 'react';

const enhance = compose(
  withState('count', 'setCount', 0),
  withHandlers({
    incrementCount: props => event => {
      // props would contain copy prop. 
      props.setCount(props.count + 1)
    },
    otherExample: () => event => {
      // If you didn't need props in your handler
    },
    otherIncrementCountExample: ({ count, setCount }) => () => {
      // you can exclude event also
      setCount(count + 1);
    }
  });

export default IncButton = ({ count, incrementCount, copy }) => (
  <div>
   <button onClick={incrementCount}> {copy} </button>
  </div>
);

用法:

import React from 'react';
import IncButton from './IncButton';
export default App = () => (
  <div>
    <IncButton copy="Increment Me"/>
  </div>
);