javascript - nbsp - Reaccionar saltos de línea de visualización del área de texto guardada

salto de linea html5

Question

Usando Facebook React . En una página de configuración, tengo un área de textarea multilínea donde un usuario puede ingresar texto multilínea (en mi caso, una dirección).

<textarea value={address} />

Cuando trato de mostrar la dirección, de modo que algo como {address} , no muestra los saltos de línea y está todo en una línea.

<p>{address}</p>

¿Alguna idea de como resolver esto?

Answer 1

A partir de React 16, un componente puede devolver una matriz de elementos, lo que significa que puede crear un componente como este:

export default function NewLineToBr({children = ""}){
  return children.split(''/n'').reduce(function (arr,line) {
    return arr.concat(
      line,
      <br />
    );
  },[]);
}

que usarías así:

<p>
  <NewLineToBr>{address}</NewLineToBr>
</p>

Answer 2

Esto es de esperarse, necesitaría convertir los nuevos caracteres de línea (/ n) en saltos de línea HTML

Un artículo sobre su uso en react: https://medium.com/@kevinsimper/react-newline-to-break-nl2br-a1c240ba746#.l9sbqp5aw

Para citar el artículo:

Como sabes que todo en React son funciones, realmente no puedes hacer esto

this.state.text.replace(/(?:/r/n|/r|/n)/g, ''<br />'')

Dado que eso devolvería una cadena con nodos DOM dentro, tampoco está permitido, porque tiene que ser solo una cadena.

Entonces puedes intentar hacer algo como esto:

{this.props.section.text.split(“/n”).map(function(item) {
  return (
    {item}
    <br/>
  )
})}    

Eso tampoco está permitido porque nuevamente Reaccionar es funciones puras y dos funciones pueden estar una al lado de la otra.

tldr. Solución

{this.props.section.text.split(“/n”).map(function(item) {
  return (
    <span>
      {item}
      <br/>
    </span>
  )
})}

Ahora estamos ajustando cada salto de línea en un intervalo, y eso funciona bien porque el intervalo tiene una visualización en línea. Ahora tenemos una solución de salto de línea nl2br que funciona

Answer 3

La propuesta anterior de Pete con componente independiente es una gran solución, aunque se pierde una cosa importante. Las listas necesitan keys . Lo ajusté un poco y mi versión (sin advertencias de consola) se ve así:

const NewLineToBr = ({ children = '''' }) => children.split(''/n'')
  .reduce((arr, line, index) => arr.concat(
    <Fragment key={index}>
      {line}
      <br />
    </Fragment>,
  ), [])

Utiliza los Fragments React 16

Answer 4

La solución es establecer la propiedad white-space en white-space en el elemento que muestra el contenido de su área de textarea :

white-space: pre-line;

Answer 5

Me encanta la versión webit. No sabía sobre el componente Fragmento, es muy útil. Sin embargo, no es necesario utilizar el método de reducción. El mapa es suficiente. Además, la lista necesita claves para reaccionar, pero es un mal hábito usar el índice del método iterativo para ello. Eslint siguió rompiendo esto en mi advertencia hasta que tuve el error de confusión. Así se vería así:

const NewLine = ({ children }) =>
   children.split("/n").map(line => (
    <Fragment key={uuidv4()}>
      {line}
      <br />
    </Fragment>
  ));

Answer 6

No hay razón para usar JS. Puede decirle fácilmente al navegador cómo manejar la nueva línea usando la propiedad CSS de white-space :

white-space: pre-line;

prelínea

Las secuencias de espacios en blanco se colapsan. Las líneas se dividen en los caracteres de nueva línea, en <br> y según sea necesario para llenar los cuadros de línea.

Mira esta demostración:

<style>
  #p_wrap {
    white-space: pre-line;
  }
</style>

<textarea id="textarea"></textarea>
<p id="p_standard"></p>
<hr>
<p id="p_wrap"></p>
<script>
  textarea.addEventListener(''keypress'', function(e) {
    p_standard.textContent = e.target.value
    p_wrap.textContent = e.target.value
  })
</script>