在react中，经常会碰到从后端获取到的一段字符串中包含‘\n’换行符的情况，此时，我们要在dom中渲染该字符串，并让其在换行符的地方实现换行。如果直接去使用jsx语法渲染的话，可能不能如你所愿。
jsx引入了dangerouslySetInnerHTML
下面是react官网对
dangerouslySetInnerHTML的介绍：
dangerouslySetInnerHTML
dangerouslySetInnerHTML
React是
innerHTML
在浏览器DOM中使用的替代品。通常，从代码设置HTML是有风险的，因为很容易无意中将您的用户暴露给
跨站点脚本（XSS）
攻击。因此，您可以直接从React设置HTML，但是您必须键入
dangerouslySetInnerHTML
并使用
__html
键传递对象，以提醒自己这很危险。
例如：
function createMarkup() {
return {__html: 'First \n Second'};
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
上面的代码虽然可以解析出字符串‘First \n Second’中的\n换行符，但如果‘First \n Second’这个字符串是一个变量，我试了一下，并没有解析出换行，而是将\n解析成一个空格，或是将<br />标签解析成[Object]，即如：
function createMarkup() {
let str = 'First \n Second'
return {__html: str}; // 这里字符串换成变量表示
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
最终，我在react项目中，并没有使用dangerouslySetInnerHTML属性实现解析\n换行符，我发现，如果是字符串变量中包含\n换行符，只需在css样式中加入whiteSpace: 'pre-wrap'即可实现解析\n换行符。例如：
let str = '要解析出换行符\n要解析出换行符'
// ......
<div style={{whiteSpace: 'pre-wrap'}}>{{str}}</div>
CSS white-space 属性
在react中，经常会碰到从后端获取到的一段字符串中包含‘\n’换行符的情况，此时，我们要在dom中渲染该字符串，并让其在换行符的地方实现换行。如果直接去使用jsx语法渲染的话，可能不能如你所愿。jsx引入了dangerouslySetInnerHTML下面是react官网对dangerouslySetInnerHTML的介绍：dangerouslySetInnerHTMLdang...
Vue 3.0 正式发布了，喜大普奔:beaming_face_with_smiling_eyes:。新的语法又要学习一阵阵，不过需要在生产环境下大面积使用，可能需要等到它的周边工具：vuex，vue-router 等等全部升级完毕。
Vue 3.0 中尤大使用的了新的编译工具 vite，革了 webpack 的命:face_with_tears_of_joy:。尝试看了下文档，发现支持 jsx 语法，由于这段时间都是在使用 react 来开发项目，jsx 完全不同的体验，更加的纯粹与灵活。
npm init vite-app vite-vue
cd vite-vue
npm install
npm run dev
我们发现创建的目录解构很简单
使用 JSX
Vue 3.0 直接支持
最近在React项目中，后端返回的字符串中用\n提供给前端进行换行，但是在前端页面并没用实现换行，我在网上查了很多资料，找到很多方法，但是都没有实现换行，最后，我自己无意间通过组合试出来了。
1 首先，对返回的数据中的\n进行处理,用<br/>替换
eg:const info = 'React\n Vue\n Angular';
const replaceInfo = info.replace(/\\n/g, '<br/>);
2 在JSX中，配合dangerousSetIn
在react中，通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示。
this.state.sourText = <div>这是一段文字</div> ...
render() { return <div>{this.state.sourText}<...
您可以使用 Webpack
中的 babel-loader，将
JSX 文件转换为纯 JavaScript 文件，同时指定一个输出目录，将转换后的文件放在那里。另外，您还需要在 webpack.config.js 文件
中配置 entry 和 output 属性。具体操作可参考以下代码：
webpack.config.js 文件：
module.exports = {
entry: './index.
jsx',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
module: {
rules: [
test: /\.
jsx?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-
react']
在上述配置
中，我们使用 babel-loader 来
解析 .
jsx 文件，并且只将项目源代码
中除了 node_modules 目录以外的文件作为转译对象。转换后的文件将被打包进 dist/bundle.js 文件
中。
而在 index.
jsx 文件
中，您需要按照规范书写
JSX 代码，例如：
import
React from '
react';
import
ReactDOM from '
react-dom';
const HelloMessage = (props) => {
return <div>Hello {props.name}!</div>;
ReactDOM.render(<HelloMessage name="John" />, document.getElementById('root'));
其
中，<HelloMessage /> 将被转换为
React.createElement('HelloMessage', null)的形式。
这样，您就可以顺利的将
JSX 文件重定向到纯 JavaScript 文件，并通过 Webpack 打包输出。
