React.memo在不运行areEqual函数的情况下重新渲染递归组件

Question

我有一个带有注释的页面。一个注释可以包含一个子字段，该字段是一组注释。我有一个组件CommentGroup，它呈现一个CommentCard，如果找到字段子项，则会呈现另一个带有子项的CommentGroup。这就是它的样子：

<div className={styles.commentsWrapperElements}>
<div className={styles.commentsWrapperElementsParent}>
<CommentCard
comment={comment}
key={comment.id}
collapsed={collapsed}
onReplyClick={onReplyClick}
onDeleteClick={onDeleteClick}
repliedTo={replyToId === comment.id}
order={order}
/>
</div>
{comment?.children?.length > 0 ?
<div className={styles.commentsWrapperElementsChildren}>
{comment.children.map(e => <CommentCardGroup
comment={e}
replyToId={replyToId}
onDeleteClick={onDeleteClick}
onReplyClick={onReplyClick}
key={e.id}
addComment={addComment}
order={order}
/>)}
</div> : <></>
}
</div>

我在这个带有自定义函数的组件上使用了React.memo，它适用于顶部组件，但不适用于子组件(嵌套组件(。我用这个函数调试：

export function areEqual(prevProps, nextProps) {
console.log('-');
return false;
}

日志的数量等于父元素的数量，即使是同一个组件，该函数也不会为子元素运行。

Answer 1

我发现了原因，我在导出时做了备忘录，所以孩子们使用的组件不是记忆中的组件，我的错。