react標簽不換行怎么辦-全球觀速訊

【資料圖】

本教程操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react標簽不換行怎么辦？

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視頻教程》

以上就是react標簽不換行怎么辦的詳細內容，更多請關注php中文網其它相關文章！

關鍵詞： React