React'te çok satırlı bir metin dizesi nasıl oluşturulur

Satır sonları içeren bir metin dizem olduğunu ve bunu şu şekilde işlediğimi varsayalım:

render() {
    var text = "One\nTwo\nThree";
    return <div>{text}</div>;
}

HTML'de satır kesmeleri satır kesmeleri olarak işlenmez. Bunu React'te nasıl yapmalıyım? <br>Etiketlere dönüştürmek ve kullanmak istemiyorum dangerouslySetInnerHTML. Başka bir yolu var mı?

Her satıra div koymayı deneyebilirsiniz

render() {
    return (<div>
        <div>{"One"}</div>
        <div>{"Two"}</div>
        <div>{"Three"}</div>
    </div>);
}

Veya

render() {
    var text = "One\nTwo\nThree";
    return (
    <div>
        {text.split("\n").map((i,key) => {
            return <div key={key}>{i}</div>;
        })}
    </div>);
}

Yeni bir CSS sınıfı oluşturun

.display-linebreak {
  white-space: pre-line;
}

Metninizi o CSS sınıfıyla görüntüleyin

render() {
  const text = 'One \n Two \n Three';
  return ( 
     <div className="display-linebreak"> 
        {text} 
     </div>
  );
}

Satır sonu içeren görseller (Beyaz boşluk dizileri tek bir beyaz alana daralır. Metin gerektiğinde kaydırılır). Bunun gibi:

One
Two
Three

Ayrıca önceden sarmayı da düşünebilirsiniz. Daha fazla bilgi burada ( CSS beyaz boşluk Özelliği ).

"White-space: pre" CSS özelliğini kullanabilirsiniz. Bunun üstesinden gelmenin en kolay yolu bu.

İşte en temiz çözüm (afaik):

   render(){
      return <pre>
             Line 1{"\n"}
             Line 2{"\n"}
             Line 3{"\n"}
      </pre>
   }

Bunun yerine <div style={{whiteSpace:"pre"}}>, veya başka herhangi bir html blok öğesini de kullanabilirsiniz ( bu stil niteliği gibi spanveya pile)

Bunu dene,

render() {
    var text = "One\nTwo\nThree";
    return <div style={{whiteSpace: 'pre-line'}}>{text}</div>;
}

Sınırlandırılmış metninizi "Birinci satırım \ nİkinci satırım \ nNeler ..." normal bir html metin alanı içinde oluşturun. Çalıştığını biliyorum çünkü bugün kullandım! Metin alanını yalnızca gerekiyorsa okunabilir hale getirin ve buna göre stil verin.

-webkit-user-modify: read-write-plaintext-only;Div'de kullanabilirsiniz . Örneğin \ n ve \ p gibi şeyleri biçimlendirecek ve anlayacaktır.

Html'nin textarea etiketini kullanabilir, daha sonra stili textarea etiketine ekleyebilirsiniz. Satır sonları ve sekme boşlukları dahil tüm sorunlarınızı hemen hemen çözer. Cheerzz ...

Örneğin: Renderiniz aşağıdaki gibi görünecek

render() {
    var text = "One\nTwo\nThree";
    return <textarea>{text}</textarea>;
}

Çıktı:

One
Two
Three

Bunun String.rawyerine bu tür bir değer için güvenle çalıştırabilirsiniz .

const text = String.raw`One
Two
Three
`

render() {
  return <div style={{ whiteSpace: "pre" }}>{text}</div>
}

<pre>Aynı şeyi etkili bir şekilde yapan bir etiketi de kullanabilirsiniz , ancak bunu zaten uygulamanızda başka amaçlar için kullanıyorsanız anlamsal olarak daha az açıktır.

<div style={{ whiteSpace: "break-spaces" }}> {JSON.stringify(state, null, " ")} </div>