handleNotFound() { this.setState({ displayMessage: 'It looks like the link you are trying to reach does not exist.\n ' + 'If you clicked this link , please leave a comment within the article that contained the link so the author can be notified.\n ' + 'If you clicked this link from a location outside of __, please contact the _to open a ticket with the application where this link is referenced .\n ' + 'The link you were trying to reach: ' + url });El mensaje de la pantalla termina apareciendo en una oración, ¿cómo agrego correctamente un descanso entre cada oración?
handleNotFound() { this.setState({ displayMessage: ` something went wrong. I think you should use html tags to render your error message if it is in the dom ` });// Jsx no romperá tus párrafos pero tienes dos opciones
Envuelva el mensaje de displayMessage en la etiqueta pre . `
{this.state.displayMessage}Dividir, mapear y recortar la cadena.
render(){ return this.state.displayMessage.split("\n").map(sentence => ( <p>{sentence.trim()}</p> )) }Para cosas como mensajes estándar, estaría más inclinado a tenerlos en un archivo de configuración en lugar de un estado. El archivo de configuración puede incluir cualquier cosa: objetos, matrices, funciones que devuelven matrices...
Este último es lo que he usado en este código porque necesitas completar la url en algún momento. La función acepta un argumento de URL y lo completa cuando se devuelve la matriz. Luego puede map sobre la matriz y mostrar cada línea.
const { Component } = React; const config = { displayMessage: function (url) { return [ 'It looks like the link you are trying to reach does not exist.', 'If you clicked this link , please leave a comment within the article that contained the link so the author can be notified.', 'If you clicked this link from a location outside of __, please contact the _to open a ticket with the application where this link is referenced.', `The link you were trying to reach: ${url}` ] } } class Example extends Component { constructor() { super(); this.url = 'http://www.google.com'; } render() { return ( <div> {config.displayMessage(this.url).map(line => { return <p>{line}</p>; })} </div> ); } }; ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>