如何将HOC转换成custom hook

Question

export const GroupedInputWithLabel = (props) => {
  const { required, children, fieldName } = props;
  const inputComponent = (
    <>
      <ControlLabel htmlFor={fieldName} required={required} />
      {children}
    </>
  );
  return <GroupedInput {...props}>{inputComponent}</GroupedInput>;
};

export const withGroupInput = (props, Component) => (
  <GroupedInputWithLabel {...props}>
    <Component {...props} />
  </GroupedInputWithLabel>
);

老师我有这么一段逻辑 withGroupInput 是用HOC形式完成的 想问下这种不涉及state的逻辑封装有必要用custom hook做吗？如果有 请问如何改成custom hook？ 谢谢

Answer 1

张轩 2021-07-10 14:44:06

同学你好 你这个组件更多考虑的是界面的展示规则，所以用 HOC 非常适合，在这里建议就按你写的来办，custom hook 针对的是和界面无关的逻辑可以提取到自定义函数中。并不适合你这个场景。

• 提问者 ywang04 #1

  非常感谢！