¿Cómo rendir condicionalmente en React.js?

Estoy tratando de renderizar condicionalmente en una aplicación Electron-React-Typescript.

Este es el código:

import React, {useCallback} from 'react'
import {useDropzone} from 'react-dropzone'

const imgViewer = (file: File) => {
  const obj_url = URL.createObjectURL(file);
  return(
    

      
    

  )
}
const pdfViewer = (file: File) => {
  const obj_url = URL.createObjectURL(file);
  return (
    

      

        
      

    

  );
}
export default function MyDropzone() {
  let fileType;
  let imgF;
  const onDrop = useCallback((acceptedFiles) => {
    acceptedFiles.forEach((file) => {
      const reader = new FileReader()

      reader.onabort = () => console.log('file reading was aborted')
      reader.onerror = () => console.log('file reading has failed')
      reader.onload = () => {
        const binaryStr = reader.result
        console.log("binaryStr", binaryStr)
      }
      reader.readAsArrayBuffer(file)
      fileType = file.type

      console.log("file.type: ", file.type);

      if (fileType.includes("image/")) {
        console.log("FileType: image");
        return imgViewer(file);
      }

      if (fileType.includes("/pdf")) {
        console.log("FileType: pdf");
        return pdfViewer(file);
      }
    })
  }, [])

  const {getRootProps, getInputProps} = useDropzone({onDrop})

  return (
    

      
      
Drag 'n' drop some files here, or click to select files

    

  )
}

Cómo renderizar en MyDropzone la imagen y los archivos pdf, llamando al img adecuado Viewer o el pdfViewer ? He establecido las dos funciones, pero no sé cómo rendir condicionalmente.

Pregunta hecha hace 3 años, 4 meses, 28 días - Por codecrusader

2 Respuestas:

  • Para renderizar condicionalmente en React.js, puedes utilizar una variable de estado para controlar qué tipo de componente renderizar en función del tipo de archivo. Aquí te dejo un ejemplo de cómo podrías modificar tu código para lograrlo:

    jsx
import React, { useState, useCallback } from 'react'
import { useDropzone } from 'react-dropzone'

const ImgViewer = ({ file }) => {
  const objUrl = URL.createObjectURL(file);

  return (
    
    
      
    
    
  )
}

const PdfViewer = ({ file }) => {
  const objUrl = URL.createObjectURL(file);

  return (
    
    
      
    
        
      
    
    
    
  )
}

export default function MyDropzone() {
  const [viewer, setViewer] = useState(null);

  const onDrop = useCallback((acceptedFiles) => {
    acceptedFiles.forEach((file) => {
      const fileType = file.type;

      if (fileType.includes("image/")) {
        setViewer();
      } else if (fileType.includes("pdf")) {
        setViewer();
      }
    });
  }, []);

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    
    
      
      
    Drag 'n' drop some files here, or click to select files
    
      {viewer}
    
    
  )
}

    En este código, he utilizado el estado viewer para renderizar condicionalmente el componente ImgViewer o PdfViewer según el tipo de archivo que se cargue. Al llamar a setViewer dentro de onDrop, se actualiza el estado y se renderiza el componente correspondiente al tipo de archivo seleccionado. Finalmente, en el retorno de MyDropzone, renderizo el componente viewer que contendrá el visor de imagen o PDF según haya sido seleccionado.

    Espero que esta solución te haya sido útil. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 18, 2020 a las 17:48 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Hay varias formas de renderizar condicionalmente en React. Aquí tienes dos enfoques comunes:

    1. Operador condicional ternario

    Puedes utilizar el operador condicional ternario para renderizar un componente u otro en función de una condición. Por ejemplo:

    
{fileType.includes("image/") ? imgViewer(file) : pdfViewer(file)}

    Esto renderizará imgViewer si fileType contiene "image/" y pdfViewer en caso contrario.

    2. Declaración if-else

    También puedes utilizar una declaración if-else para renderizar condicionalmente. Por ejemplo:

    
if (fileType.includes("image/")) {
  return imgViewer(file);
} else if (fileType.includes("/pdf")) {
  return pdfViewer(file);
}

    Puedes utilizar cualquiera de estos enfoques en tu componente MyDropzone para renderizar condicionalmente el visor de imágenes o el visor de PDF según el tipo de archivo.

    Aquí tienes un ejemplo actualizado de tu código con la declaración if-else:

    
export default function MyDropzone() {
  let fileType;
  let imgF;
  const onDrop = useCallback((acceptedFiles) => {
    acceptedFiles.forEach((file) => {
      const reader = new FileReader()

      reader.onabort = () => console.log('file reading was aborted')
      reader.onerror = () => console.log('file reading has failed')
      reader.onload = () => {
        const binaryStr = reader.result
        console.log("binaryStr", binaryStr)
      }
      reader.readAsArrayBuffer(file)
      fileType = file.type

      console.log("file.type: ", file.type);

      if (fileType.includes("image/")) {
        console.log("FileType: image");
        return imgViewer(file);
      }

      if (fileType.includes("/pdf")) {
        console.log("FileType: pdf");
        return pdfViewer(file);
      }
    })
  }, [])

  const {getRootProps, getInputProps} = useDropzone({onDrop})

  return (
    
    
      
      
    Drag 'n' drop some files here, or click to select files
    
      {fileType.includes("image/") ? imgViewer(file) : pdfViewer(file)}
    
    
  )
}

    En este ejemplo, renderizamos condicionalmente el visor de imágenes o el visor de PDF dentro del componente principal MyDropzone.

    Respondida el Dec 18, 2020 a las 18:01 - por Gemini

    Votos positivos: 0 | Votos negativos: 0