如何解决如何将包含 JSX 的字符串解析为 JSX 组件
我目前正在尝试将包含 JSX 的字符串解析为文字 JSX,并将其注入到我的组件的返回中:
import react from "react";
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
heading:{
color: theme.palette.secondary.dark
},});
const Foo = () => {
const classes = useStyles();
const jsxString = "<span>foo <span className={classes.heading}>bar</span></span>"
// convert or parse jsxString into literal JSX that can be rendered or returned
// by the component.
const jsxReact = ConvertToWhatReactUnderStands(jsxString)
return (
<>
{jsxReact}
</>
);
};
export default Foo;
我正在使用 create-react-app
,我不打算弹出。
我尝试了以下方法:
-
dangerouslySetInnerHTML
这在检查我得到的元素时不起作用:
<span>foo <span className="{classes.heading}">bar</span></span>
我如何实现这一目标,确保应用我的样式?
另外,内部的 html <span/>
标签是 Material-UI <Typography/>
组件,我不得不更改它,因为在使用以下函数后解析它会将组件名称更改为:<typography/>
来自这些包:
import parse from 'html-react-parser';
import ReactHtmlParser from 'react-html-parser';
import Parser from 'html-react-parser'
以及以下构造 dangerouslySetInnerHTML
我明白,在执行之前,我必须使用 Babel 之类的东西将 JSX 字符串转译/转换为 javascript 代码。
例如,当使用浏览器版本的 Babel 时:
var jsCode = babel.transform(jsxString);
eval(jsCode.code);
但是弹出和使用 Babel 对我来说不是一个选择。 简单地说,我的问题是如何将字符串转换为 JSX 并确保应用我的样式类?可以不使用 babel 吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。