interface ICard { content: string, blanks: Array<{word: string, hidden: boolean}> } function processCards():Array<any>{ if (cards !==null ){ const text = cards.map((card,cardIndex)=>{ var content = card.content card.blanks.map((blank,blankIndex)=>{ // replace content const visibility = (blank.hidden)?'hidden':'visible' const click_blank = <span className={visibility} onClick={()=>toggleBlank(cardIndex,blankIndex)}>{blank.word}</span> content = content.replace(blank.word,click_blank) }) return content }) return text } else { return [] } }Tengo una matriz de objetos de tipo ICard. Cada vez que card.blanks.word aparece en card.content, quiero envolver esa palabra en etiquetas que contengan un estilo className Y un parámetro onClick.
Parece que no puedo simplemente reemplazar la cadena usando content.replace como lo he intentado, ya que replace() no le gusta el hecho de que tengo JSX en el código.
¿Hay otra forma de abordar este problema?
Debe construir un nuevo ReactElement a partir de las partes de la cadena que preceden y siguen a cada blank.word en blanco, con el nuevo span atascado en el medio. Puede hacer esto creando iterativamente una matriz y luego devolviéndola envuelta en <> ( <React.Fragment> ). Aquí hay un ejemplo (javascript):
export default function App() { const toggleBlankPlaceholder = (cardIndex, blankIndex) => {}; const cardIndexPlaceholder = 0; const blanks = [ { word: "foo", hidden: true }, { word: "bar", hidden: false }, ]; const content = "hello foo from bar!"; const res = [content]; for (const [blankIndex, { word, hidden }] of blanks.entries()) { const re = new RegExp(`(.*?)${word}(.*)`); const match = res[res.length - 1].match(re); if (match) { const [, prefix, suffix] = match; res[res.length - 1] = prefix; const visibility = hidden ? "hidden" : "visible"; res.push( <span className={visibility} onClick={() => toggleBlankPlaceholder(cardIndexPlaceholder, blankIndex) } > {word} </span> ); res.push(suffix); } } return <>{res}</>; } El valor devuelto será hello <span class="hidden">foo</span> from <span class="visible">bar</span>!
Un par de cosas:
map over card.blanks sin consumir el valor. ¡Por favor, no hagas eso! Si no tiene la intención de usar la nueva matriz que crea el map , use forEach en su lugar.blanks ocurre 0 o 1 veces en orden en content . Su uso de replace en su código de ejemplo solo habría reemplazado la primera aparición de blank.word (consulte los documentos ), aunque no estoy seguro de que eso sea lo que pretendía. Su código no hizo una suposición de orden, por lo que deberá volver a trabajar mi código de ejemplo un poco dependiendo del comportamiento deseado.