克隆一个实现 forwardRef 的 React 组件

Question

Lets say I have a base component that uses forwardRef like so:

const BaseMessage = React.forwardRef((props, ref) => (
   <div ref={ref}>
      {props.icon}
      <h2>{props.title}</h2>
      <p>{props.message}</p>
   </div>
)

Now I want to create a second component, ErrorMessage that is essentially a copy of the BaseMessage but with a predefined value for props.icon , such that the icon prop is not needed to be set. Otherwise, its an exact copy of BaseMessage .

<ErrorMessage title="Oops!" message="Something went wrong when submitting the form. Please try again." />

I don't want to have to do this, since it feels weird to have two layers of forwardRef going on here:

const ErrorMessage = React.forwardRef(({icon, ...props}, ref) => (
   <BaseMessage ref={ref} icon={<svg></svg>} {...props} />
))

Is there a way I can make a clone/copy of BaseMessage without having to reimplement forwardRef for ErrorMessage as well? I know there are utils out there like withProps from recompose but I'd like to avoid using a library if I can.

Answer 1

Try cloneElememt

React.cloneElement(BaseMessage, { icon: '' })