從保存的文本區域反應顯示換行符

使用Facebook React。在設置頁面中，我有一個多行textarea用戶可以輸入多行文本（在我的情況下，地址）。從保存的文本區域反應顯示換行符

<textarea value={address} />

當我試圖顯示地址，所以像{address}，它不顯示換行符是所有在一行。

<p>{address}</p>

任何想法如何解決這個問題？

來源

2016-03-28 denislexic

沒有理由使用JS。您可以輕鬆地告訴瀏覽器如何使用white-space CSS屬性來處理換行符：

空白的

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>

來源

2017-06-07 13:15:59 enapupe

我認爲這應該是被接受的答案 – bpercevic

最好，最簡單的解決方案！ – beydogan

這有多種工作方式：如果您嘗試通過變量在JSX中顯示換行符（
），它將「安全」地呈現標記而不是添加換行符。在這個CSS中使用轉義字符可以解決這個安全機制，並解決這個問題。 – bvoyelr

這是可以預料的，你就需要在新行（\ n）的字符轉換爲HTML換行符

有關在使用它的文章作出反應：https://medium.com/@kevinsimper/react-newline-to-break-nl2br-a1c240ba746#.l9sbqp5aw

引述文章：

因爲你知道，一切都在REACT爲功能，你不能真正做到這一點

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

硅nce會返回一個帶有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> 
) 
})}

現在我們將每個換行符都包裝在一個範圍內，並且工作正常，因爲span具有內聯顯示。現在我們得到了一個可用的nl2br換行解決方案

來源

2016-03-28 10:09:48

謝謝馬克，像一個魅力。你有可能把答案放在這裏嗎？ Stackoverflow不喜歡外部鏈接（可能會消失，難以查看答案列表......），我會將您的答案標記爲正確。 – denislexic

對他人的提示：您還需要爲該跨度添加關鍵屬性，因爲它處於循環狀態。所以它會是'.... map（function（item，i）{return {item}
}）' – denislexic

很好的回答！這對我有幫助。此外，如果您有多行換行符，則可以防止爲最後一項渲染多餘的'
'：'.... map（function（item，i，arr）{return { item} {arr.length-1 === i？null：
}}）'。注意，我包含'.map（）'的第三個參數' – Lasha

解決的辦法是設置屬性white-space顯示您textarea內容的元素：

white-space: pre-line;

來源

2017-11-01 11:52:01 OualidAj

從保存的文本區域反應顯示換行符

回答

相關問題