0
221
Vistas¿Cómo puedo representar una pieza de contenido dinámicamente solo una vez a partir de datos mapeados, a pesar de las posibles coincidencias múltiples?
Tengo un objeto de datos que estoy extrayendo de un CMS para crear un blog y estoy mapeando a través del objeto de contenido para representar el cuerpo principal del blog.
He creado un operador ternario para decir esencialmente que si la línea de texto tiene un tipo de 'fuerte', ponga la fuente en negrita, de lo contrario, si tiene un tipo de 'hipervínculo', haga que el texto sea un enlace dentro de una etiqueta .
El problema que tengo es que algunos fragmentos de texto son tanto 'negrita' como 'hipervínculo', por lo que se muestra la oración dos veces, ¿cómo puedo asegurarme de que cuando el tipo es 'negrita' e 'hipervínculo', solo se renderiza una vez?
Así es como se ven mis datos:
y aquí está mi archivo donde devuelvo estos datos en la interfaz:
<div className='text-left mt-12 text-white'> <h1 className='text-5xl mb-4 font-header text-blue-500'> {RichText.asText(data.title)} </h1> {data.content.map((t, i) => { return ( <> {!t.spans[0] && ( <p className={`text-lg mt-6 opacity-80 ${t.type}`}> {t.text} </p> )} {t.spans.map((item) => item.type === 'strong' ? ( <p className={`text-xl mt-6 font-bold ${t.type}`}> {t.text} </p> ) : item.type === 'hyperlink' ? ( <a href={item.data.url} target='_blank' className={`text-lg opacity-80 mt-6 text-blue-500 ${t.type}`}> {t.text} </a> ) : item.type === 'list-item' ? ( <ul className='list-disc'> <li className='text-lg mt-4 text-white'>{t.text}</li> </ul> ) : ( <p className={`text-lg opacity-80 mt-6 font-bold ${t.type}`}> {t.text} </p> ) )} </> ); })} </div>Estoy seguro de que esto es simple, pero me preguntaba cuál era la mejor manera de manejar algo como esto.
¡Gracias por adelantado!
1 Respuestas
Responde la pregunta0
No haga que su lógica cambie los casos según el tipo.
Prueba algo como esto:
const styleProps = spans.reduce((acc, span) => { if (span === 'strong'){ acc['font-weight'] = 'bold'; } if (span === 'something-else'){ acc['some-css-prop'] = 'some-value'; } ... return acc; }, {}) y luego tendrá un acumulador ( styleProps ) con todos los accesorios necesarios para diseñar su componente.
<YourComponent className="my-constant-class-name" style={{...styleProps}} />Puedes generalizar esta idea:
ex.
const MyComponentProps = spans.reduce((acc, span) => { if (span === 'strong'){ acc.style['font-weight'] = 'bold'; } if (span === 'hyperlink'){ acc['href'] = 'www.example.com'; } ... return acc; }, {});y también
let MyComponent = null; switch(type){ case 'hyperlink': MyComponent = (props) => <a {...props} />; break; case 'text': MyComponent = (props) => <p {...props} />; break; case 'bullet': MyComponent = (props) => <li {...props} />; break;y entonces
<MyComponent {...MyComponentProps} />