Tengo una variable llamada resultElem que se crea después de leer una matriz. A medida que lee la matriz, quiero agregar una nueva línea '\n' o
al final del mismo, siguiendo un espacio.
for (let l=0; l<answer.questions.length; l++) { var questionMap = [answer.questions[l].questionId, answer.questions[l].answers]; let resultElem :any; for (let m =0; m< employmentAnswerMap[l].answerKVs.length; m++){ if (questionMap[1].includes(employmentAnswerMap[l].answerKVs[m].id)) { resultElem = resultElem + employmentAnswerMap[l].answerKVs[m].text + ' ' + '\n';// I have tried + '\n' and + 'br' } } result.push(resultElem); }También probé .appendChild() pero no me gustó porque solo quiero usar resultElem para crear los datos.
return ( <dl> <dt>Health Needs</dt> <dd>{result[0]}</dd> </dl> ...more ui codeSe muestra, pero como un gran párrafo de texto sin líneas nuevas, así
healthNeed1 healthNeed2 healthNeeds3 healthNeed1 healthNeed2 healthNeeds3Puedo imprimir las cadenas en una línea separada usando '\n' . Estoy agregando demostración a continuación. ¿Puede actualizar eso según el problema que enfrenta para que podamos investigarlo?
demostración:
const answer = { questions: [{ questionId: 1, answers: ['answer1', 'answer2', 'answer3'] }] }; const employmentAnswerMap = [ { answerKVs: [{ id: 1, text: 'healthNeed1' }, { id: 2, text: 'healthNeed2' }, { id: 3, text: 'healthNeed3' }] } ]; const result = []; for (let l=0; l<answer.questions.length; l++) { var questionMap = [answer.questions[l].questionId, answer.questions[l].answers]; let resultElem = ''; for (let m =0; m < employmentAnswerMap[l].answerKVs.length; m++){ if (questionMap[1].find((elem) => elem.includes(employmentAnswerMap[l].answerKVs[m].id)).length > 0) { resultElem = resultElem + employmentAnswerMap[l].answerKVs[m].text + ' ' + '\n'; } } result.push(resultElem); } console.log(result[0]);A HTML realmente no le gusta agregar saltos de línea, incluso si los incluye. Si tiene que incluirlos, los literales de plantilla son la forma más fácil. Para usarlos, use acentos graves (`) en lugar de comillas simples (') o dobles ("). Los literales de plantilla toman literalmente lo que escribe como cadena, y solo se pueden escapar al final de la cadena, o encapsulando su escapado javascript con ${}. Se ve así:
let bob=true; `Look at me, I'm using backticks! ${bob ? "No literals here!" : "But you can use the 'ternary operator'!"}`Desafortunadamente, no parece que a la muestra de código le gusten los acentos graves. ¡Pero te aseguro que funcionan! Por supuesto, incluso con el retorno dentro de los literales de la plantilla, HTML los ignorará en su mayoría a menos que use la nueva propiedad de espacio en blanco de CSS. También puede agregar una nueva etiqueta <p> para cada uno, que se puede diseñar como desee, incluso para que tengan una nueva línea.
Tuve que envolver mi HTML alrededor de este div para que las líneas nuevas ("/n") se mostraran correctamente
<div style={{whiteSpace: "pre-wrap"}}>