溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“react標簽不換行如何解決”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
react標簽不換行的解決辦法：1、對返回的數據中的“\n”進行處理，用“
”標簽替換；2、在JSX中，配合“dangerousSetInnerHTML”實現換行，并設置css屬性“white-space:pre-wrap”即可。
React項目/JSX中‘\n’不換行問題解決
最近在React項目中，后端返回的字符串中用\n提供給前端進行換行，但是在前端頁面并沒用實現換行，我在網上查了很多資料，找到很多方法，但是都沒有實現換行，最后，我自己無意間通過組合試出來了。
1 首先，對返回的數據中的\n進行處理,用<br/>替換
eg:const info = 'React\n Vue\n Angular';
const replaceInfo = info.replace(/\\n/g, '<br/>);
2 在JSX中，配合dangerousSetInnerHTML實現換行,設置css屬性：white-space:pre-wrap
eg:<div style={{whiteSpace: 'pre-wrap'}} dangerousSetInnerHTML={{__html: replaceInfo}}>
“react標簽不換行如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
