Tengo un código heredado de un sitio en el que estoy trabajando actualmente, y el autor agregó algunos comentarios que indican que la solución que codificaron era un poco hacky .
¿Alguien sabría por qué ese sería el caso, y por qué habrían dicho eso?
const onClickDownloadFile = (id, filename) => { const token = state.token; if (token === "") { return; } const req = new Request(process.env.REACT_APP_API_URL + "/path/" + id ); fetch(req, { headers: new Headers({ "Authorization": "Bearer " + token, "Accept": "application/octet-stream" }), method: "GET" }) .then(res => res.blob()) .then((data) => { // This is a little hacky but gives a download link the browser will understand const url = window.URL.createObjectURL(new Blob([data])); const link = document.createElement("a"); link.href = url; link.setAttribute("download", filename); document.body.appendChild(link); link.click(); link.parentNode.removeChild(link); }) }Probablemente respaldado no puede enviar encabezados HTTP adecuados como "disposición de contenido: archivo adjunto". Al tratar de solucionarlo en el lado de la interfaz de usuario, dejamos un código que intenta simular hacer clic en el enlace para que el navegador comience a buscar el recurso.
Crear un enlace y hacer clic en él no está relacionado con React self. El autor acaba de intentar arreglar el contrato/acuerdo faltante entre lo que necesita la interfaz de usuario y lo que podría ofrecer el backend.
Sin llegar al autor, nunca sabremos por qué lo consideraron pirateado. Considero este código hacky por dos razones:
El código crea un elemento <a> , establece un enlace, hace clic en él automáticamente y luego lo elimina. La activación manual de clics en elementos es muy complicada, ya que no debemos tomar el control de las acciones del usuario. Más bien, deberíamos capacitarlos para que hagan clic en los elementos, en lugar de que nuestro código lo haga detrás de escena.
Una mejor práctica en React es no usar las API DOM de JavaScript para representar HTML. En su lugar, lee state y props y usa esa información para actualizar el HTML que representa su componente React. Este código no sigue este patrón React. En su lugar, utiliza las API DOM para crear y eliminar esos elementos (como document.createElement() y document.appendChild() y parentNode.removeChild() . En su lugar, le gustaría ver que se agregue algo como lo siguiente en el render() función de su clase o componente React:
render() { return <a href={someUrl} download>Download your file now<a>; }Es probable que esto se deba a que están creando un nuevo elemento en el DOM, luego invocando el atributo de download , antes de eliminar el elemento nuevamente. Ciertamente no es la mejor práctica, pero parece hacer el trabajo