सहेजे गए टेक्स्टारिया से रिएक्ट डिस्प्ले लाइन टूट जाती है

Question

फेसबुक का उपयोग करना React। सेटिंग्स पृष्ठ में, मेरे पास एक बहुस्तरीय है textareaजहां एक उपयोगकर्ता बहुस्तरीय पाठ (मेरे मामले में, एक पता) दर्ज कर सकता है।

<textarea value={address} />

जब मैं पता प्रदर्शित करने की कोशिश करता हूं, तो ऐसा कुछ होता है {address}, यह लाइन ब्रेक नहीं दिखाता है और यह सब एक लाइन पर है।

<p>{address}</p>

इसे हल करने का कोई उपाय?

Answer 1

जेएस का उपयोग करने का कोई कारण नहीं है। आप आसानी से ब्राउज़र को बता सकते हैं कि कैसे white-spaceसीएसएस संपत्ति का उपयोग करके न्यूलाइन को संभालना है:

white-space: pre-line;

पूर्व लाइन

व्हॉट्सऐप के सीक्वेंस ढह गए हैं। <br>लाइन के बक्से को भरने के लिए लाइनों को न्यूलाइन वर्णों पर , और आवश्यकतानुसार तोड़ दिया जाता है।

इस डेमो को देखें:

<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>

Comments

यह कई तरीकों से काम करता है: यदि आप JSX में एक लाइन ब्रेक (<br />) को एक चर के माध्यम से रेंडर करने की कोशिश करते हैं, तो यह लाइन ब्रेक को जोड़ने के बजाय मार्कअप को "सुरक्षित रूप से" प्रस्तुत करेगा। इस सीएसएस के साथ भागने के पात्रों का उपयोग उस सुरक्षा तंत्र के चारों ओर काम करता है और साथ ही बताए गए मुद्दे को ठीक करता है।

— bvoyelr

बहुत अच्छा और सरल उपाय। अब सभी नई लाइन अक्षर टेक्सारे के लिए उम्मीद के मुताबिक काम कर रहे हैं।

— नैमिष

Answer 2

यह अपेक्षित है, आपको नई पंक्ति (\ n) वर्णों को HTML लाइन विराम में बदलने की आवश्यकता होगी

प्रतिक्रिया में इसका उपयोग करने के बारे में एक लेख: न्यूक्लियर को तोड़ने के लिए प्रतिक्रिया दें (nl2br)

लेख उद्धृत करने के लिए:

क्योंकि आप जानते हैं कि रिएक्ट में सब कुछ कार्य है, आप वास्तव में ऐसा नहीं कर सकते

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

चूंकि वह DOM नोड्स के साथ एक स्ट्रिंग को वापस लौटाएगा, इसलिए इसे अनुमति नहीं है, क्योंकि केवल एक स्ट्रिंग होना चाहिए।

आप फिर कुछ इस तरह की कोशिश कर सकते हैं:

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

इसकी अनुमति नहीं है क्योंकि फिर से रिएक्ट शुद्ध कार्य है और दो कार्य एक दूसरे के बगल में हो सकते हैं।

tldr। उपाय

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

अब हम प्रत्येक लाइन-ब्रेक को एक स्पैन में लपेट रहे हैं, और यह ठीक काम करता है क्योंकि स्पैन की इनलाइन प्रदर्शित होती है। अब हमें एक कामकाजी nl2br लाइन-ब्रेक समाधान मिला

Comments

धन्यवाद मार्क, एक आकर्षण की तरह काम करता है। कोई भी मौका आप यहाँ जवाब डाल सकते हैं? Stackoverflow बाहरी लिंक पसंद नहीं करता है (गायब हो सकता है, उत्तर की सूची देखने के लिए कठिन है, ...) और मैं आपके उत्तर को सही के रूप में चिह्नित करूंगा।

— डेनिस्लेक्सिक

दूसरों पर ध्यान दें: आपको स्पैन में एक प्रमुख विशेषता जोड़ने की आवश्यकता है क्योंकि यह एक लूप में है। तो यह होगा....map(function (item, i) { return <span key={i}>{item}<br/></span> })

— denislexic

बहुत बढ़िया जवाब! यह मेरे लिए मददगार था। ALSO, यदि आपके पास MULTIPLE लाइन ब्रेक है, तो आप <br />अंतिम आइटम के लिए अतिरिक्त प्रदान करने से रोक सकते हैं ....map(function (item, i, arr) { return <span key={i}>{item}{ arr.length-1 === i ? null : <br/>}</span> }):। ध्यान दें कि मैंने 8 तर्क के लिए.map()

— Lasha

मुझे समझ नहीं आ रहा है कि आपको यह कैसे काम करना है। मैं <textarea> में जो प्रदर्शित करता हूं वह है[object Object]

— एड।

@ईडी। यह एक textarea में नहीं HTML पाठ प्रदर्शित करने के लिए है। क्या उससे मदद हुई?

— डेनिसलेक्सिक

Answer 3

समाधान यह white-spaceहै कि आपके द्वारा प्रदर्शित सामग्री पर तत्व सेट किया जाए textarea:

white-space: pre-line;

Answer 4

स्टैंडअलोन घटक के साथ पीट का पिछला प्रस्ताव महान समाधान है, हालांकि इसमें एक महत्वपूर्ण बात याद आती है। सूचियों को चाबी चाहिए । मैंने इसे थोड़ा समायोजित किया और मेरा संस्करण (कंसोल चेतावनियों के बिना) इस तरह दिखता है:

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

यह 16 के प्रतिक्रिया का उपयोग करता टुकड़े

Comments

यदि आप सुनिश्चित हैं कि मैप्ड डेटा "स्थिर" है, तो कुंजियाँ केवल तभी सुरक्षित होती हैं, जब तक कि इसके जीवनचक्र में परिवर्तन न हो जाए, तब तक आप इसे बदल सकते हैं।

— enupupe

Answer 5

प्रतिक्रिया 16 के अनुसार एक घटक तत्वों की एक सरणी लौटा सकता है, जिसका अर्थ है कि आप इस तरह एक घटक बना सकते हैं:

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

जो आप इस तरह का उपयोग करेंगे:

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

Comments

मुझे '\ n' को '\ n' में बदलना था।

— डस्टोयोजो

Answer 6

वेब संस्करण से प्यार है। मैं फ्रैगमेंट घटक के बारे में नहीं जानता था, यह इतना उपयोगी है। हालांकि कम करने की विधि का उपयोग करने की आवश्यकता नहीं है। नक्शा काफी है। इसके अलावा, सूची को प्रतिक्रिया में कुंजियों की आवश्यकता होती है, लेकिन इसके लिए पुनरावृत्ति विधि से सूचकांक का उपयोग करना बुरी आदत है। जब तक मेरे पास भ्रम की स्थिति नहीं थी, तब तक मेरी चेतावनी में एस्लिंट इसे तोड़ता रहा। तो यह इस तरह दिखेगा:

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

Comments

रिएक्ट में कुंजी के रूप में uuids का उपयोग करना एक बुरा विचार है क्योंकि प्रत्येक नया रेंडर इस तत्व पर विचार करेगा नया है और इस प्रकार DOM को अनुकूलित करेगा।

— en Enupupe