Определение функции для withHandler в Recompose для React

Во всех примерах, которые я рассматривал, функция, фактически вызываемая в withHandlers, похоже, вызывает функцию из props, но я понятия не имею, как эта функция определена. Вот небольшой пример из документов для людей.

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, если это так..)


reactjs recompose
person Nick Brady    schedule 25.05.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

withHandlers принимает каррированную функцию / функцию более высокого порядка, чтобы установить реквизиты из других HOC (компонент высокого порядка), таких как 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>
);

Применение:

import React from 'react';
import IncButton from './IncButton';
export default App = () => (
  <div>
    <IncButton copy="Increment Me"/>
  </div>
);
person Perspective    schedule 26.05.2017
comment
Спасибо за ответ. Стоит отметить, что функция, о которой я говорил в вопросе (setCount), является сеттером, созданным withState для создаваемой переменной. - person Nick Brady; 15.06.2017

arrow_upward
0
arrow_downward

Узнал ответ, мой пример здесь проще, чем мой компонент, но я сделаю все возможное, чтобы перевести свои выводы... хотя это не тестируется ниже.

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

(фейспалм), как я и подозревал в своем вопросе. withHandlers просто автоматически определяет для вас функцию, которая заменит параметр состояния любым аргументом, который вы ему передадите. Это не умная функция, хотя и полезная. Он примет любой аргумент, который вы ему дадите, и обновит состояние вашего HOC с помощью этого аргумента. Вы бы использовали это так...

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

someProp просто показывает использование оператора распространения, если вы хотите, чтобы некоторые реквизиты имели значение по умолчанию или были переданы, вы хотите вызвать их специально... ура

person Nick Brady    schedule 25.05.2017