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

【问题标题】：How to pass the initial state as props for my Higher Order Component?如何将初始状态作为我的高阶组件的道具传递？
【发布时间】：2017-02-24 07:25:21
【问题描述】：

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

我正在使用来自recompose 库的withState 来实现这一目标。

这是我的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>
);

我需要使用来自recompose 库的compose 吗？任何建议或帮助将不胜感激。 :)

【问题讨论】：

标签： javascript reactjs composite-component higher-order-functions recompose

【解决方案1】：

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

我应该传递对将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

【讨论】：