tengo esta cadena:
export default function App() { const string = 'test data,cars,colors,demo'; return ( <div className="App"> <h1>Hello {string.replaceAll(',','<br>')}</h1> </div> ); }Espero:
test data<br>cars<br>colors<br>demoPero obtengo una cuerda sin rotura dentro de mi cuerda. ¿Cómo lograr lo que espero usando replaceAll ()?
Para mostrar html desde una cadena, debe usar dangerouslySetInnerHTML
export default function App() { const string = 'test data,cars,colors,demo'; return ( <div className="App"> <h1 dangerouslySetInnerHTML={{ __html: `Hello ${string.replaceAll(',','<br>')}`}}></h1> </div> ); }Suponiendo que se trata de una aplicación React, debe usar peligrosamente SetInnerHTML para agregar el nuevo HTML a la página.
function Example() { const string = 'test data,cars,colors,demo'; const html = `Hello ${string.replaceAll(',', '<br>')}</h1>`; return ( <div className="App"> <h1 dangerouslySetInnerHTML={{ __html: html }} /> </div> ); } // Render it 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>No te sugiero dangerouslySetInnerHTML . Introduce problemas de seguridad y rendimiento, e incluso si está trabajando en un proyecto de aprendizaje, es mejor que evite este enfoque.
La razón por la cual su código no funciona, JSX no convierte mágicamente la cadena "<br>" en el elemento apropiado (hasta que haya un dangerouslySetInnerHTML , claro).
Pero JSX puede representar arreglos perfectamente. Nos permite dividir la cadena inicial en elementos: string.split(', ') y luego inyectar <br /> de JSX con la ayuda de .flatMap() (piense en ello como si .join() pudiera devolver una matriz con elementos adicionales entre los elementos de la matriz de origen).
{ string. split(', '). flatMap((el, index) => index ? [<br />, el]: el) } Este enfoque es mucho más poderoso que dangerouslySetInnerHTML , ya que en lugar de un BR simple, puede usar cualquier árbol JSX con componentes personalizados, contexto y controladores de eventos de React.
Otro enfoque es reemplazar ',' con saltos de línea y aplicar white-space: pre-wrap (consulte los documentos white-space en todos los valores disponibles)