reactjs - 如何将包含 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可以吗?
解决方案
推荐阅读
- ios - iOS - 从 ios 应用程序以加密形式将信用卡/借记卡存储在服务器上,然后再次从应用程序解密。我怎样才能最安全地管理它?
- c# - 多个线程(客户端)使用的列表集合
- elasticsearch - 如何使用可选参数构造 NEST 查询?
- angular - 如何绑定并获取使用 angular4 datepicker 动态生成的 datepicker 的值?
- android - onRequestPermissionsResult 正在片段下编译
- react-native - 获取 someUrl.html 在 React Native / Expo 中不起作用?
- haskell - 当“修改”具有相同值的字段时,无法将类型“HandlerSite m0”与“HandlerSite m”匹配
- python - 如何将编辑的txt文件保存到新的txt文件中?
- java - 在这种情况下仅调整图像(png)的大小时,BitmapFactory 真的有必要吗?
- python - 如何获取所有可能响应模式的容器名称?