Estoy mostrando una lista de publicaciones. Hay 3 tipos diferentes de contenido que mostrarán estas publicaciones. Entonces, la vista de lista de todas estas publicaciones es la misma. Título estándar, miniatura, autor, etc. Pero cuando vas a la página de estos 3 tipos diferentes, el contenido presenta un diseño diferente (componente diferente). Tengo un operador ternario simple para configurar los diferentes enlaces para 2 de los tipos de enlace. Pero ahora que tengo 3, ¿cuál es la mejor práctica para configurar esa lógica?
Esto es lo que tengo hasta ahora:
<div className="all-posts"> { currentPosts?.map(post => ( <Link key={post.id} className="link-wrapper" to={post.course_trailer ? `course/${post.id}` : `/lesson/${post.id}`}> <div className="post-container"> <div className="thumbnail-container"> <img className="post-thumbnail" src={post.course_trailer ? post.featured_image : post.app_thumbnail} alt="" /> </div> <div className="post-meta"> <p className="post-title">{post.title}</p> <div className="author-meta"> <div className="author-container"> <p className="post-teacher">@{post.instructor_name}</p> <img className="verification-badge" src="#" alt="" /> </div> <p className="post-views">Views: {post.views}</p> </div> </div> </div> </Link> )) } </div>Ves en el Link que tengo el ternario. Ahora necesito configurar la lógica como si post.course_trailer vaya a esta ruta si post.formulas luego vaya a esta ruta, de lo contrario vaya a la ruta estándar.
Una forma de resolver esto mientras se mantiene la cordura ternaria (me gusta llamarlo así: D) es extraer la lógica en una función. Pongámosle un nombre como getLinkForPost . Esta función obtiene un objeto de post pasado como parámetro y devuelve la cadena correspondiente.
const getLinkForPost(post) => { if(post.course_trailer) return 'path1'; if(post.formulas) return 'path2'; return 'default path'; } ... //somewhere in render <Link key={post.id} className="link-wrapper" to={getLinkForPost(post)}> ...Puedes anidar ternarios infinitamente.
function component (){ return ( <div> {post.course_trailer ? `course/${post.id}` : post.formulas ? `/lesson/${post.id}` : `/standard` } </div> ); }