Higher Order Componentの初期状態を小道具として渡す方法は？

Question

私が代わりに、それは状態を管理し、私は達成するためにrecomposeライブラリからwithStateを使用していSlider

に小道具をダウン渡しSliderDragと呼ばれる別のコンポーネントに包まれています、自身の状態を処理しないSliderコンポーネントを持っていますそれ。ここ

は私のSlider状態初期状態は

export const getInitialState =() => ({ 
    min: 0, 
    max: 100, 
    value: 50, 
    step: 1, 
    width: 100, 
    dragging: false 
}); 

されており、ここで私の高次成分であるwithState()

export const SliderDrag = withState('state', 'onChange', getInitialState())(
    ({state, onChange, action}) => (
    <Slider 
    {...state} 
    onDragStart={({x}) => { 
    onChange(dragStart(x, state)); 
    }} 
    onDrag={({x}) => { 
    onChange(drag(x, state)); 
    action('value')(state.value); 
    }} 
    onDragEnd={() => { 
    onChange(dragEnd(state)); 
    }} 
/> 
) 
); 

からそして、ここで私がSliderDragを使用する方法です。私は私のアプリで異なるコンテキストでこのSliderコンポーネントを使用できるように

state私のイニシャルを設定するために小道具を伝承する

export const interactive = (action) => (
    <Storypage theme={designerTheme}> 
    <SliderDrag width={218} step={1} min={0} max={100} action={action}/> 
    </Storypage> 
); 

たい私はrecomposeライブラリからcomposeを使用する必要がありますか？どんな助言や助けも高く評価されます。 :)

Answer 1

私は自分の問題を解決することができました。

私は、initialStateが呼び出される。この方法をwithState()の最後の引数としてinitialStateを設定する関数への参照を渡す必要があり、私はここに私のSliderDragコンポーネント

に渡しているpropsにアクセスする必要があります私はちょうど私が渡している値をオーバーライドし、私に私stateなどの新しいオブジェクトを与え、ここで、この

const initialState = ({min, max, step, width, value}) => { 
    debugger; 
    return defaults({min, max, step, width, value}, defaultState()); 
}; 

export const SliderDrag = withState('state', 'onChange', initialState)(
    ({state, onChange, action}) => (
     <Slider 
     {...state} 
     ... 
     /> 
) 
); 

defaultsをリファクタリングする方法です。他のcomponentはそれを使用してinitial state

として propsを伝承することができますので、これは私の component設定可能で