React में मल्टी-लाइन टेक्स्ट स्ट्रिंग कैसे रेंडर करें

Question

मान लीजिए कि मेरे पास एक पाठ स्ट्रिंग है जिसमें लाइन-ब्रेक शामिल हैं, और मैं इसे इस तरह प्रस्तुत करता हूं:

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

HTML में लाइन-ब्रेक लाइन-ब्रेक के रूप में प्रस्तुत नहीं करता है। मुझे रिएक्ट में यह कैसे करना चाहिए? मैं <br>टैग और उपयोग में कनवर्ट नहीं करना चाहता dangerouslySetInnerHTML। क्या कोई और तरीका है?

Comments

यदि आपने इस्तेमाल किया <br>है तो यह समस्या हो सकती है। जब तक आप <br/>HTML 4 संस्करण का उपयोग नहीं करते हैं मैंने देखा है कि जेएस ट्रांसफार्मर इसे पसंद नहीं करता है ।

— स्टेविसमा

एक चर के लिए रिएक्ट-कोड की दो पंक्तियों को असाइन करने के लिए, दोनों पंक्तियों के आसपास कोष्ठक का उपयोग करें। ()

— वेल विक्टस

मैंने इसे प्री-रैप का उपयोग करके ठीक किया। इसी तरह के एक सवाल का मेरा जवाब है: stackoverflow.com/a/55466235/5346095

— JS Dev

Answer 1

आप प्रत्येक पंक्ति के लिए divs लगाने की कोशिश कर सकते हैं

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

या

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

Comments

मुझे यह पसंद है। मुझे लगता है कि मैं भी एक <MultilineText>घटक से बाहर कर सकता है!

— हारून बीलल

आप <div>टेक्स्ट लाइनों को प्रारूपित करने के लिए क्यों उपयोग करेंगे ? <p>शब्दार्थ अधिक सही लगता है।

— कोस्त

इस गंभीरता से यह कैसे है चाहिए प्रबंधित करें? मुझे लगता है कि यह काम करता है, लेकिन यह मार्कअप में गड़बड़ी पैदा करता है। क्या होगा यदि उपयोगकर्ता इस पाठ की प्रतिलिपि बनाना चाहता है? निष्पक्ष होने के लिए, यहाँ दोष प्रतिक्रिया के हैंडलिंग में है, आपके समाधान से नहीं। यह सबसे अच्छा विकल्प हो सकता है, लेकिन वाह।

— केविनकोलेमैन

प्रतिक्रिया के बारे में भी मत सोचो, सोचें कि आप HTML का उपयोग करके इसे कैसे संभाल सकते हैं। अब तक का सबसे अच्छा उपाय यह है कि डिव का निर्माण करें, बीआर टैग लगाएं या ब्लॉक स्पैन डालें। मेरी राय में यह HTML / प्रतिक्रिया के लिए एक ही परिदृश्य है।

— सर्जियो फ्लोर्स

Answer 2

एक नया CSS-class बनाएं

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

उस सीएसएस-वर्ग के साथ अपना पाठ प्रदर्शित करें

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

लाइन-ब्रेक के साथ रेंडर (व्हॉट्सएप के अनुक्रम एक ही व्हाट्सएप में ढह जाएंगे। आवश्यक होने पर पाठ लपेटेंगे)। ऐशे ही:

One
Two
Three

आप पूर्व-लपेट पर भी विचार कर सकते हैं। अधिक जानकारी यहाँ ( CSS white-Space Property )।

Comments

यह उस उत्तर का एक बढ़िया विकल्प है जो मैंने स्वीकार किया और उत्थान के योग्य है, लेकिन मुझे लगता है कि मुझे इस बात का उल्लेख करना चाहिए कि मैंने इसे आज़माया था और इसमें लेआउट / अतिप्रवाह / प्रतिपादन की समस्या थी; व्हाट्सएप विकल्पों में से कोई भी विकल्प उन सभी मामलों में सही काम नहीं कर रहा था जिन्हें मुझे उस समय तय करने की आवश्यकता थी, जबकि स्वीकृत उत्तर ने किया।

— आरोन बेयेल

बेहतरीन जवाब के लिए। बस सीएसएस जोड़ें और नक्शे या कुछ और का उपयोग करने की आवश्यकता नहीं है। धन्यवाद।

— फ्रेडेरिको सेसर

Answer 3

आप CSS संपत्ति "व्हाइट-स्पेस: प्री" का उपयोग कर सकते हैं। मुझे लगता है कि इसे संभालने का यह सबसे आसान तरीका है।

Comments

सबसे अच्छा जवाब, imo: यह डिस्प्ले की समस्या है, इसलिए इसे आदर्श रूप से css (html में फेरबदल करके नहीं) से निपटा जाना चाहिए

— Bogdan D

white-space:prewhite-space:nowrapमेरे लिए एक ही प्रभाव था , यानी पाठ अपने कंटेनर से बह निकला। white-space:pre-wrapइसके बजाय इसका उपयोग करके हल किया गया।

— rorymorris89

केवल "पूर्व" का उपयोग करने के परिणामस्वरूप पाठ को कंटेनर से अधिक / कोई लपेटकर नहीं दिया जाएगा। white-space: pre-line;इसके बजाय उपयोग करें ।

— फ्रेडरिको सेसर

Answer 4

यहाँ साफ समाधान (afaik):

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

के बजाय आप भी उपयोग कर सकते हैं <div style={{whiteSpace:"pre"}}>, या किसी भी अन्य HTML ब्लॉक तत्व (जैसे spanया pइस शैली विशेषता के साथ)

Comments

विभिन्न तरीकों की कोशिश करने के बाद धन्यवाद, यह एकमात्र समाधान है जो मेरे लिए काम करता है।

— सौरभ राणा

Answer 5

इसको आजमाओ,

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

Answer 6

अपना सीमांकित पाठ "मेरी लाइन एक \ n दूसरी पंक्ति \ n व्हाट्सएव ..." को एक सामान्य html टेक्स्टारिया के अंदर रेंडर करें। मुझे पता है कि यह काम करता है क्योंकि मैं आज ही इसका इस्तेमाल करता हूं! यदि आवश्यक हो, तो textarea को आसानी से पढ़ें और तदनुसार शैली बनाएं।

Answer 7

आप -webkit-user-modify: read-write-plaintext-only;अपने div में उपयोग कर सकते हैं । यह उदाहरण के लिए \ n और \ p जैसी चीजों को प्रारूपित और समझेगा।

Answer 8

आप htmlar के textarea टैग का उपयोग कर सकते हैं, बाद में आप textarea टैग में स्टाइल जोड़ सकते हैं। यह लाइन ब्रेक और टैब स्पेस सहित आपके सभी मुद्दों को बहुत हल करता है। Cheerzz ...

उदाहरण: आपका रेंडर नीचे की तरह दिखाई देगा

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

आउटपुट:

One
Two
Three

Answer 9

आप String.rawइस प्रकार के मान के बदले सुरक्षित रूप से चला सकते हैं ।

const text = String.raw`One
Two
Three
`

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

आप बस एक <pre>टैग का उपयोग कर सकते हैं जो प्रभावी रूप से एक ही काम करता है, लेकिन इसका कम शब्दार्थ स्पष्ट है यदि आप पहले से ही अपने ऐप में अन्य प्रयोजनों के लिए उपयोग कर रहे हैं।

Answer 10

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