¿Cuál es un enfoque válido para visualizar un texto creado dentro de un elemento de área de texto con los saltos de línea correctamente asignados?
Tan pronto como ingreso un salto de línea presionando la tecla Intro, puedo ver que esto se muestra correctamente dentro del área de texto, pero cuando visualizo el resultado en otro elemento, el salto de línea aparece como un espacio. Los datos también se guardan en mi base de datos sin saltos de línea.
Adjunté un código de muestra al siguiente enlace: https://codesandbox.io/s/busy-hodgkin-1oujz?file=/src/App.js
La forma más fácil sería a través de CSS, siguiendo:
... <div className="App"> <div className="wrapper"> <div> <p class='formatted'>{text}</p> </div> ... Y luego: .formatted { white-space: pre; }
Otra forma sería usar dangerouslySetInnerHTML :
... <div className="wrapper"> <div> <p dangerouslySetInnerHTML={{ __html: formattedText, }}> </p> </div> ...Y la lógica para manejar eso sería:
const [text, setText] = useState(''); const [formattedText, setFormattedText] = useState(text); const handleTextInput = ({ target }) => { const { value } = target; const formattedValue = value.replace(/\n/g, '<br />'); setText(value); setFormattedText(formattedValue); };Hay algunos enfoques posibles para su problema. En pocas palabras, \n los caracteres de nueva línea en el área de texto no funcionan en html sin formato. En su lugar, podríamos usar <br /> .
En lugar de simplemente representar el texto tal como está almacenado, puede dividirlo en nuevas líneas y representar <br /> en su lugar:
<p> {text.split('\n').map((subtext) => ( <> {subtext} <br/> </> ))} </p>