爲React定義withHandler函數

我所看到的所有示例函數實際上在withHandlers中調用的函數似乎都調用了函數props，但我不知道該函數是如何定義的。這是docs for humans的一個小例子。爲React定義withHandler函數

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需要知道狀態更新者的名字，或者如果是這樣的話，甚至是相關的。

是否只定義爲您自動功能，它將取代與任何參數傳遞給它的狀態參數（捂臉如果是這樣..）

來源

2017-05-25 Nick Brady

withHandlers需要一個curried/higher order函數來設置來自其他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> 
);

來源

2017-05-26 00:45:33 Perspective

感謝您的回答。值得注意的是，我在問題（'setCount'）中提到的「函數」是由'withState'爲創建的var創建的setter。 –

找到了答案，我在這裏的例子是比我的部件簡單，但我會盡我所能翻譯我的發現...雖然這未在下面進行測試。

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是隻是爲了顯示使用傳播經營者，如果你想要一些道具有默認或獲得通過您要特別調用...乾杯

來源

2017-05-25 21:51:49

爲React定義withHandler函數

回答

相關問題