내 Higher Order Component에 대한 초기 상태를 소품으로 전달하는 방법은 무엇입니까?

Question

내가 대신,이 상태를 관리하고 달성하기 위해 recompose 라이브러리에서 내가 withState 사용하고있어 Slider

소품을 통과 SliderDrag라는 또 다른 구성 요소에 싸여있어, 자신의 상태를 처리하지 않는 Slider 구성 요소가 그.

여기 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)); 
    }} 
/> 
) 
); 

에서 내 Slider 상태를 초기 상태

여기

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

그리고 내 높은 순서 구성 요소입니다입니다 그리고 여기에 내가 SliderDrag를 사용하는 방법입니다. 내가 설정하는 소품을 전달하려는 나의 초기 state 그래서 난 내 응용 프로그램에서 다른 문맥에서이 Slider 구성 요소를 사용할 수있는

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

내가 recompose 라이브러리에서 compose를 사용해야합니까? 조언이나 도움을 주시면 감사하겠습니다. :)

Answer 1

도움을 주시면 문제를 해결할 수있었습니다.

내가 withState() 마지막 인수로 initialState을 설정하는 함수에 대한 참조를 통과해야

는 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 구성 할 수 있습니다