Originalmente tenía un componente principal que tenía este componente contenedor en algunos elementos 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> ); }; Lo que quiero es en lugar de envolver estos elementos con un componente, solo me gustaría pasar una función al controlador onClick del padre de los niños.
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/>¡Necesito hacer que todo el componente sea un enlace en lugar de secciones como era!
¡Cualquier ayuda sería apreciada!
si puede editar el componente CardArticle, puede hacerlo de la siguiente manera:
// 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> ) }