tengo un componente en React que recibe algunos elementos (fotos), tengo un objeto con esta composición:
getItems() { const { gallery } = this.props; const { content_elements: contentElements } = gallery; const items = []; if (contentElements) { contentElements.forEach((photo, index) => { let item = ( <div key={photo.id} className="gal__fig-item"> <Image srcset="gallery" figureClassName="mm" imgClassName="mm__img" noZoom={true} showCaption={false} wrapperClassName="mm__wr" {...photo}/> </div> ); items.push(item); }); } return items; }Necesito agregar un accesorio en el componente de la imagen, pero solo en el primer elemento (índice = 0).
Hago esto:
getItems() { const { gallery } = this.props; const { content_elements: contentElements } = gallery; const items = []; if (contentElements) { contentElements.forEach((photo, index) => { let item = ( <div key={photo.id} className="gal__fig-item"> <Image srcset="gallery" figureClassName="mm" imgClassName="mm__img" noZoom={true} showCaption={false} wrapperClassName="mm__wr" {...photo}/> </div> ); if(index === 0){ item = ( <div key={photo.id} className="gal__fig-item"> <Image srcset="gallery" figureClassName="mm" imgClassName="mm__img" noZoom={true} showCaption={false} hasLazyLoad={false} wrapperClassName="mm__wr" {...photo}/> </div> ); } items.push(item); }); } return items; }Eso funciona, pero... ¿quizás haya otra opción, un código más limpio, para hacerlo? ¿Puede ayudarme alguien? Gracias
puede establecer hasLazyLoad en función del valor de i :
if (contentElements) { contentElements.forEach((photo, index) => { let item = ( <div key={photo.id} className="gal__fig-item"> <Image srcset="gallery" figureClassName="mm" imgClassName="mm__img" noZoom={true} showCaption={false} hasLazyLoad={i !== 0} // use i !== 0 to false when i = 0 wrapperClassName="mm__wr" {...photo}/> </div> ); } ```Reemplazaría forEach para mapear y agregar un operador ternario para hasLazoLoad prop:
getItems() { const { gallery } = this.props; const { content_elements: contentElements } = gallery; const items = contentElements?.map((photo, index) => { return <div key={photo.id} className="gal__fig-item"> <Image srcset="gallery" figureClassName="mm" imgClassName="mm__img" noZoom={true} showCaption={false} hasLazyLoad={index === 0 ? false : true} wrapperClassName="mm__wr" {...photo} /> </div> }) || []; return items; }Sugiero esto:
si el índice era cero, hasLazyload será falso y viceversa
getItems() { const { gallery } = this.props; const { content_elements: contentElements } = gallery; const items = []; if (contentElements) { contentElements.forEach((photo, index) => { let item = ( <div key={photo.id} className="gal__fig-item"> <Image srcset="gallery" figureClassName="mm" imgClassName="mm__img" noZoom={true} showCaption={false} hasLazyLoad = {index !== 0} wrapperClassName="mm__wr" {...photo}/> </div> ); items.push(item); }); } return items; }