react-jsx-parse 神奇的react-jsx-parser，专门用来解析react的jsx字符串。

此插件一般用在请求数据渲染不同内容的情况，比如报告模板，它比dangerouslySetInnerHTML好的地方在于支持react组件的导入，动态数据的渲染，下图例子展示

jsx

import { Checkbox, Col, Row, Image, Radio, QRCode } from "antd";
import dayjs from 'dayjs'
import JsxParser from 'react-jsx-parser'
import './reportTemplate.css'
import Barcode from "../../../components/Barcode";
import checkedImg from '../../../images/checked.png'
import nocheckedImg from '../../../images/nochecked.png'

const ReportTemplate = (props) => {
	//jsx内容例子
	//<Row>
	//	<Col>
	//	  {baseInfo.name}
	//	</Col>
	//	<Image src={checkedImg} />
	//</Row>
	let { formValue, baseInfo, jsx } = props
	return <JsxParser
		components={{ Row, Col, Checkbox, Image, Radio, Barcode, QRCode }}  ///用来传jsx使用到的组件
		bindings={{ baseInfo, formValue, dayjs, getUrlId, checkedImg, nocheckedImg }} ///用来传jsx使用到的数据
		jsx={`${jsx}`}  //用来传jsx字符串
	/>
}
export default ReportTemplate

需要注意的一点是，如果jsx的写法不规范，那么此插件渲染出的内容为空，要检测下更多使用方式点击这里

Contributors

作者:Long Mo

字数统计:249 字

阅读时长:1 分钟

Long Mo

文章作者：Long Mo

react-jsx-parse 神奇的react-jsx-parser，专门用来解析react的jsx字符串。 ​

Contributors ​

react-jsx-parse 神奇的react-jsx-parser，专门用来解析react的jsx字符串。

Contributors