Question

可以说我有一个像这样使用forwardRef的基本组件：

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

现在，我想创建第二个组件ErrorMessage，该组件本质上是BaseMessage的副本，但具有props.icon的预定义值，使得icon属性不需要设置。否则，其为BaseMessage的精确副本。

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

我不想这样做，因为在这里进行两层forwardRef感觉很奇怪：

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

是否有一种方法可以制作BaseMessage的克隆/副本，而不必为forwardRef重新实现ErrorMessage？我知道那里有withProps中的recompose这样的实用程序，但我想避免使用库。

Answer 1

尝试cloneElememt

TextQuery query = new TextQuery(TextCriteria.forDefaultLanguage().matching("red"));
query.addCriteria(Criteria.where("category_id").is(42));
query.sortByScore();

克隆一个实现forwardRef的React组件

1 个答案: