Tengo una cadena que contiene un carácter de nueva línea. Por ejemplo:
const myString = `hello\nstring` Luego estoy tratando de mostrar esta cadena en un componente funcional, que se envuelve alrededor de una etiqueta p . Por ejemplo:
export default function App() { const testString = "hi\nString"; return ( <div className="App"> <p>{testString}</p> </div> ); } Por alguna razón, la etiqueta p simplemente muestra "hello string" en una línea cuando me gustaría que se mostrara en dos líneas. ¿Hay alguna manera de evitar que la etiqueta p elimine el carácter de nueva línea dentro de la cadena?
El siguiente Code Sandbox contiene el ejemplo ejecutable: https://codesandbox.io/s/unruffled-allen-ehrsd8?file=/src/App.js
¿Utilizó el código <br/> para romper la línea? Verifique el código como se indica a continuación:
export default function App() { const testString = "hi<br/>String"; return ( <div className="App"> <p>{testString}</p> </div> ); }Puede usar el método .split siempre que se encuentre \n dentro de su código para ingresar una nueva línea
function NewlineText(props) { const text = props.text; const newText = text.split('\n').map(str => <p>{str}</p>); return newText; } export default function App() { const testString = `hi\nString`; return ( <div className="App"> <p><NewlineText text={testString} /></p> </div> ); }Este sitio puede aclarar sus dudas restantes.
Creo que esto se debe a que las líneas nuevas y los espacios en blanco se colapsan en el navegador de forma predeterminada. No necesita JavaScript para esto, solo agregue la siguiente línea en su hoja de estilo:
p { white-space: pre-wrap; }