React:如何在父级影响子级上设置onClick处理程序

Question

最初我有一个父组件，它在一些DOM元素上有这个包装组件：

const Card = ({ }) => {
const LinkComponent = ({ children }) =>
to && !onClick ? (
<Link aria-label={`${title} ${t('thumbnail-image')}`} to={to}>
{children}
</Link>
) : (
<a aria-label={`${title} ${t('thumbnail-image')}`} href={href} onClick={onLinkClick}>
{children}
</a>
);
return (
<CardArticle id={id} isListView={isListView} data-testid="card-article">
{showThumbnail && (
<LinkComponent>
<CardImage
id={id}
alt={title}
image={image}
isLazyLoading={isLazyLoading}
isListView={isListView}
/>
</LinkComponent>
)}
<CardInfo>
<TitleWrapper>
<LinkComponent>
<CardTitle data-testid="card-title" tabIndex={0} aria-label={title || t('untitled')}>
{title}
</CardTitle>
</LinkComponent>
</TitleWrapper>
</CardArticle>
);
};

我想要的不是用组件包装这些元素，而是将函数传递给子级的父级的onClick处理程序。

const handleOnClick (e) => {
if (to && !onClick) {
return <Link aria-label={`${title} ${t('thumbnail-image')}`} to={to}>
{xxxxxx} // what goes here?
</Link>
} else {
return <a aria-label={`${title} ${t('thumbnail-image')}`} href={href} onClick={onLinkClick}>
{xxxxxx} // what goes here?
</a>
}
}
return (
<CardArticle onClick={handleOnClick}>
</CardArticle/>

我需要使整个组件成为一个链接，而不是像以前那样的部分！

任何帮助都将不胜感激！

Answer 1

如果你可以编辑CardArticle组件，你可以这样做：

// CardArticle file
const CardArticle = ({children, onClick}) => {
return onClick ? onClick(children) : children
}

const Card = ({ }) => {
const handleOnClick = (children) => {
if (to && !onClick) {
return <Link aria-label={`${title} ${t('thumbnail-image')}`} to={to}>
{children} // what goes here?
</Link>
} else {
return <a aria-label={`${title} ${t('thumbnail-image')}`} href={href} onClick={onLinkClick}>
{children} // what goes here?
</a>
}
}
return (
<CardArticle onClick={handleOnClick}>
</CardArticle>
)
}