React 中 HOC 中受控的表单元素？

Question

我为输入、文本区域等制作了简单的组件，以及一些 HOCS 来扩展功能而不污染基本组件。然而，我发现有点太晚了，当我制作输入控件时， value 属性的更改会触发重新渲染，这会破坏旧的输入并重新渲染它，从而导致它失去焦点。这是其中一个 HOCS 的示例，以防我误解： 我为输入、文本区域等制作了简单的组件，以及一些 HOCS 来扩展功能而不污染基本组件。然而，我发现有点太晚了，当我制作输入控件时， value 属性的更改会触发重新渲染，这会破坏旧的输入并重新渲染它，从而导致它失去焦点。这是其中一个 HOCS 的示例，以防我误解：

import { ComponentType } from 'react'
import styles from './withClearButton.module.scss'
import { Button } from '../../../../Button/Button'
import { Icon } from '../../../../Icon/Icon'

type InjectedProps = {
  onClearButtonClick?: () => void
}

export function withClearButton<BaseProps>(Component: ComponentType<BaseProps>) {
  type HocProps = BaseProps & InjectedProps

  const hocComp = (props: HocProps) => {
    const handleClear = () => {
      if (props.onClearButtonClick) {
        props.onClearButtonClick()
      }
    }

    return (
      <div className={styles.base}>
        <Component {...(props as any)} />
        <Button className={styles.button} onClick={handleClear} appearance="icon">
          <Icon icon={'ri-close-line'} />
        </Button>
      </div>
    )
  }

  hocComp.displayName = `withClearButton(${Component.displayName || Component.name || 'Component'})`

  return hocComp
}

有没有一种更聪明的方法来做到这一点，或者有一种替代方法可以让我添加此类内容而无需接触基础组件，同时仍然能够像本机输入组件一样使用它？ 有没有更智能的方法来做到这一点，或者有一种替代方法可以让我添加此类内容而无需接触基本组件，同时仍然能够像本机输入组件一样使用它？

Answer 1

我发现在使用前简单地记住 HOC 的结果，而不是 HOC 本身返回的函数，就足以解决我的问题：

const InputWithClearButton = useMemo(() => withClearButton(Input), []);