Question

我有一个Slider组件，它不会处理自己的状态，而是包含在另一个名为SliderDrag的组件中，该组件管理状态并将道具传递给Slider

我使用withState库中的recompose来实现这一目标。

这是我的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的方法。我想传递道具来设置我的初始state，以便我可以在我的应用中的不同上下文中使用此Slider组件

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

我是否需要使用compose库中的recompose？任何建议或帮助将受到高度赞赏。：）

Answer 1

在一些帮助下，我能够解决我的问题。

我应该传递对将initialState设置为withState()的最后一个参数的函数的引用，这样当initialState被调用时，我将有权访问{{1我正在传递给我的props组件

以下是我重构的方法

SliderDrag

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提供了一个新对象。

这使我的state可配置，因为任何其他component都可以使用它并向下传递component作为props

如何将初始状态作为我的高阶组件的道具传递？

1 个答案: