react项目解决/n字符串不换行问题

第一种：

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;