第一种:
1 对数据里的\n进行处理用<br/>进行替换
const data = 'React\n Vue\n Angular';
const replaceInfo = data.replace(/\\n/g, '<br/>);
2 在JSX中,配合dangerousSetInnerHTML实现换行,设置css属性:white-space:pre-wrap
<div style={{whiteSpace: 'pre-wrap'}} dangerousSetInnerHTML={{__html: replaceInfo}}>
第二种:遍历展示
const response = "这是第一行\n这是第二行";
const lines = response.split("\n");
function App() {
return (
<div>
{lines.map((line, index) => (
// 使用<br />标签在渲染时创建换行
<span key={index}>{line}<br /></span>
))}
</div>
);
}
export default App;