Javascript 克隆实现forwardRef的React组件

假设我有一个使用

forwardRef

的基本组件，如下所示：

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

我不想这样做，因为在这里有两层

forwardRef

感觉很奇怪：

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

const ErrorMessage=React.forwardRef（（{icon，…props}，ref）=>(
))

是否有一种方法可以克隆/复制

BaseMessage

，而不必为

ErrorMessage

重新执行

forwardRef

？我知道有很多实用程序，比如

withProps

from

recompose

，但如果可以的话，我想避免使用库

试试看

React.cloneElement（BaseMessage，{icon:'}）

默认道具如何：）或者您可以只接受道具，并在下一行取消结构，然后显式返回。BaseMessage.defaultProps={图标：'}应该可以工作too@RahilAhmad这个想法是

ErrorMessage

不会暴露

图标

道具。如果我只是设置了

defaultProps={icon:'thing'}

，那么该道具仍然可以被覆盖。

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