4

我有一个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图书馆使用吗？任何建议或帮助将不胜感激。:)

4

1 回答 1

5

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

我应该传递对将 设置initialState为最后一个参数的函数的引用withState()，这样当initialState被调用时，我将可以访问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作为initial state

于 2016-10-14T22:04:31.073 回答