Question

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

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

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

我的问题是，setCount实际定义在哪里..我正在想像

这样的东西

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

因为它是从道具中调用的，所以在使用组件时是否必须将其作为道具传递？我很困惑为什么withState需要知道状态更新程序名称，或者如果是这种情况它甚至是如何相关的。

它是否只为您自动定义一个函数，它将用您传递的任何参数替换状态参数（如果是这样，则为facepalm ..）

Answer 1

var xyzArray; let translate3dValue = 'translate3d(256px, 512px, 0px)'; xyzArray = translate3dValue.replace(/translate3d|px|\(|\)/gi, '').split(',');采用curried / higher阶函数，以便从其他HOC（高阶组件）设置道具，例如withHandlers或形成它的用法。

增强的组件示例：

withSate

用法：

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>
);

Answer 2

找到答案，我的例子比我的组件简单，但我会尽力翻译我的发现......虽然这不在下面测试。

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

（facepalm），正如我在我的问题中所怀疑的那样。 withHandlers只是为你自动定义一个函数，它将用你传递的任何参数替换状态参数。它不是一个智能功能，虽然很有用。它将采用你给出的任何参数，并用该参数更新你的HOC状态。你会像这样使用它......

function ComponentToEnhance({someProp="default str", ...props}) {
  return (
    <div>
      <h1>{props.count}</h1>
      <button onClick={props.setCount}/>
    </div>
  );
}

someProp就是在那里显示扩展运算符的使用，如果你想要一些默认或传递的道具，你想要专门召唤......欢呼

在React for React

2 个答案: