[Resuelto] -como optimizar params , props en react

Avatar

si yo tengo este codigo, como puedo poner todas estas props en una variable y asi escribir solo la variable ? ejemplo: componente = (propsList) => () como podria hacerlo ??

 <>
 <div></div>
 <div></div>
 </>
) ```
8respuestas
React
Avatar

const RecensioneCard = ({titolo,autore,commento,sito,voto,range,data,imgPortal,lingua,iconMeteo} ) => ( <>

<div></div> <div></div> </> )
Avatar

No es muy claro lo que pides, se corto el código. Pero creo entenderte, porque en lugar de hacer destructuring del objeto solo pasas el objeto props?, algo como:

const RecensioneCard = props => (
    <>
        <div></div>
        <div></div> 
    </> 
)

Si esto no resuelve tu pregunta, envía por este hilo más información para poder ayudarte.

Avatar

No esta muy claro lo que describes de tu problema. Si puedes describirlo mejor y con código completo, seria excelente.

Avatar

como yo tengo este componente que tiene muchos props, y me faltan aun mas props de pasar, es posible guardar todos esos props en una const y pasarla por el componente ? creo que una opcion seria lo que dijo Alejxandro de no hacer el destructuring y escribir solo props , la idea es escribir todo de la forma mas limpia posible y todas esas props asi como las tengo ahora se ve feo )=

<div className="cd-timeline__block js-cd-block fixMargin"  data-canale={sito}>
 <div className={`cd-timeline__img  cd-timeline__img--${sito} js-cd-img ombra-facebook`}>
     <img  src={imgPortal} alt={sito} />
 </div>
 <div className="cd-timeline__content js-cd-content">
     <div className="d-flex no-block align-items-center">
         <span>
           <h2 className="textMark title-original">{titolo}</h2>
           <Flag className="receFlagBorder" code={lingua ? lingua : "null"} height="10" />
           <small
             className="autoreRece">
             <MaterialIcon
                 icon="person"
                 color='#90a4ae'
                 size={14} />
             {autore}
           </small>
         </span>
         <div className="moodIconRelative  ml-auto pr-2 ">
           {iconMeteo}
         </div>
     </div>
     <p
       dangerouslySetInnerHTML={{ __html:commento}}
       className="testMark text-original">
     </p>
     <div className="d-flex justify-content-between align-items-center fix-bottom-padding">
         <h2 className={` ${votoReceColor} mt-2`}>{voto}<span className="small text-muted"> /{range}</span></h2>
         <div>
             <span
               data-id="49208"
               className="getRece-js btn  btn-rounded btn-outline-info mt-2 mr-1"
               data-toggle="modal" data-target="#assegnaModal"><i
               className="mdi mdi-account-multiple-plus" id="change-text"></i> Assegna</span>
             <span
               className="btn  btn-rounded btn-outline-info mt-2 mr-1"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
               className="mdi mdi mdi-share-variant"></i>
               condividi
             </span>
         </div>
     </div>
     <span className="cd-timeline__date">{data}</span>
 </div>
</div>
)```
Avatar

esta incompleto este, aqui dejo todo el codigo https://jsfiddle.net/starlingx/1qgaLkcb/

Avatar

este es el codigo del componente https://jsfiddle.net/starlingx/1qgaLkcb/

Avatar

Se me ocurre que el destructuring lo puedes hacer en una constante:

const newComponent = props => {
   const
   {
       titolo,
       autore,
       commento,
       sito,
       voto,
       range,
       data,
       imgPortal,
       lingua,
       iconMeteo
   } = props

   return(
      <div>{titolo}</div> 
   )
}

O sino usar la otra opción, que seria lo clásico

const otherComponent = ({props} ) => (
   <div>{props.titolo}</div> 
)

De todos modos, podrías revisar el código que tienes en este componente y ver si se puede partir en pequeños componentes para evitar crear mucho código en un solo component y sea mas legible para ti. De esa forma podrías pasarle las props que necesite a cada pequeño componente y lograr mejor código, que es lo que buscas.

Avatar

gracias

¿En qué estamos trabajando?
React - Rutas, APIs & Hooks

Curso: React - Rutas, APIs & Hooks

Aprende a integrar React.js con librerías de terceros para ampliar sus características.