No estaba seguro de cómo formular esta pregunta de manera efectiva sin escribir un ensayo.
Tengo este componente que acepta 3 accesorios, titleArr , title y boldIndexes .
El concepto básico está en algunos componentes que representan el componente mencionado anteriormente, se creará una matriz de cadenas. Y luego, ciertos índices dentro de esa matriz se pasarán como el accesorio boldIndexes . El accesorio de title es la matriz inicial de cadenas, convertida en una cadena.
Un ejemplo seria el siguiente
const personal = 5; const friends = 1; const titleArr = [ 'You currently have ', // this item will be bold personal > 0 ? `${personal} saved item${personal > 1 ? 's' : ''} ` : null, friends > 0 ? `${personal > 0 ? 'and ' : ''}` : '. ', // this item will be bold friends > 0 ? `${friends} item${friends > 1 ? 's' : ''} ` : null, friends > 0 ? 'saved by your friends.' : null, ]; const boldIndexes = [titleArr[1], titleArr[3]]; const title = titleArr.join('');Así que en el ejemplo anterior
[ 'You currently have ', '5 saved items', 'and ', '1 item', 'saved by your friends.', ] [ '5 saved items', '1 item', ] 'You currently have 5 saved items and 1 item saved by your friends.',En mi componente, quiero algo como lo siguiente;
<StyledComponentTitle> You currently have <StyledComponentBoldTitle>5 saved items</StyledComponentBoldTitle> and <StyledComponentBoldTitle>1 item</StyledComponentBoldTitle> saved by your friends. </StyledComponentTitle>o
<StyledComponentTitle> You currently have </StyledComponentTitle> <StyledComponentBoldTitle> 5 saved items </StyledComponentBoldTitle> <StyledComponentTitle> and </StyledComponentTitle> <StyledComponentBoldTitle> 1 item </StyledComponentBoldTitle> <StyledComponentTitle> saved by your friends. </StyledComponentTitle> ¿Se puede lograr esto sin tener que hacer dangerouslySetInnerHTML ?SetInnerHTML
Puede mapear la matriz y devolver la parte con estilo con un if para que sepa si necesita ponerlo en negrita o no.
titleArr.map((el, index) => { if (index == 1 || index == 3) { return "<StyledComponentBoldTitle>" + el + "</StyledComponentBoldTitle>" } else { return el; } });Espero que esto responda a tu pregunta.
Al mapear su matriz, pruebe si el índice actual está incluido en la matriz de índices en negrita y, de ser así, agregue un nombre de clase a su intervalo (he usado el intervalo ya que tiene una visualización de bloque nativa).
export const App2 = () => { const personal = 5; const friends = 1; const titleArr = [ "You currently have ", // this item will be bold personal > 0 ? `${personal} saved item${personal > 1 ? "s" : ""} ` : null, friends > 0 ? `${personal > 0 ? "and " : ""}` : ". ", // this item will be bold friends > 0 ? `${friends} item${friends > 1 ? "s" : ""} ` : null, friends > 0 ? "saved by your friends." : null ]; const boldIndices = [1, 3]; return ( <> {titleArr.map((text, idx) => { const cls = boldIndices.includes(idx) ? "bold" : ""; // inside your stylesheet: .bold {font-weight: bolder} return ( <span key={text} className={cls}> {text} </span> ); })} </> ); };