Quiero agregar la propiedad del botón que redirigirá al enlace externo cuando se haga clic en él. prop que debe agregarse al botón es siteURL . El botón debe estar en clase = "proyecto-elemento-detalles-contenedor". ¿Tengo que instalar algún paquete externo?
botón de ejemplo: Visitar sitio
código que he escrito -
const ProjectItem = props => { const {projectDetails} = props const {projectId, imageURL, description, title, siteURL} = projectDetails return ( <> <li className="project-item-container"> <img className="project-item-image" src={imageURL} alt={`project-item${projectId}`} /> <div className="project-item-details-container"> <h1 className="project-item-title">{title}</h1> <p className="project-item-description">{description}</p> </div> </li> </> ) }puedes hacer algo como esto
const ProjectItem = props => { const {projectDetails} = props const {projectId, imageURL, description, title, siteURL} = projectDetails return ( <> <li className="project-item-container"> <img className="project-item-image" src={imageURL} alt={`project-item${projectId}`} /> <div className="project-item-details-container"> <h1 className="project-item-title">{title}</h1> <p className="project-item-description">{description}</p> <button onClick={()=>window.location.href=siteURL}>{title}</button> </div> </li> </> ) } const ProjectItem = props => { const {projectDetails} = props const {projectId, imageURL, description, title, siteURL} = projectDetails return ( <> <li className="project-item-container"> <img className="project-item-image" src={imageURL} alt={`project-item${projectId}`} /> <div className="project-item-details-container"> <h1 className="project-item-title">{title}</h1> <p className="project-item-description">{description}</p> </div> <a href={siteUrl}>{title}</a> </li> </> ) }Bueno, resolví esto. He usado el atributo en el elemento del botón.
const ProjectItem = props => { const {projectDetails} = props const {projectId, imageURL, description, title, siteURL} = projectDetails return ( <> <li className="project-item-container"> <img className="project-item-image" src={imageURL} alt={`project-item${projectId}`} /> <div className="project-item-details-container"> <h1 className="project-item-title">{title}</h1> <p className="project-item-description">{description}</p> <button type="button" className="project-redirect-button"> <a href={siteURL} alt="Broken Link"> Visit Site </a> </button> </div> </li> </> ) }