如何将 HOC 转换为响应自定义钩子

Question

我有以下代码片段，只是想知道除了将组件传递给 withGroupInput 之外，我们还有其他方法可以将 GroupedInputWithLabel 重新用于不同的组件吗？谢谢

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>
);