如何导出附加到使用 React.forwardRef 的组件的组件？

Question

我正在为输入组件构建一个 UI 系统，我希望将一个组件附加到另一个需要使用 forwardRef 的组件。 它通常在未使用 forwardRef 时有效，但我目前收到以下错误。 我该如何解决这个错误，或者在不允许的 forwardedRef 组件中导出 function？

错误：

Property 'Secondary' does not exist on type 
'ForwardRefExoticComponent<ForwardedRefProps & RefAttributes<HTMLButtonElement>>'

人为的例子

interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {}

export const ForwardRefButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
  function Button(props, ref) {
    return(
      <button ref={ref}>Ref is forwarded</button>
    )
  }
)

ForwardRefButton.Secondary = function () { // <- ForwardRefButton.Secondary errors
  return (
    <button>Secondary Button</button>
  )
}

Answer 1

发生错误是因为您试图将属性Secondary添加到ForwardRefButton组件，这是一个ForwardRefExoticComponent ，它不允许向其添加新属性。

解决此问题的一种方法是将ForwardRefButton包装在另一个组件中，并将该属性添加到该新组件。 例如：

interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {}
export const ForwardRefButton = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
  return(
    <button ref={ref}>Ref is forwarded</button>
  )
})

interface WrappedButtonProps extends ButtonProps {}
const WrappedButton = (props: WrappedButtonProps) => {
  return <ForwardRefButton {...props} />;
};
WrappedButton.Secondary = function () {
  return (
    <button>Secondary Button</button>
  )
};
export { WrappedButton as ForwardRefButton };