如何将包含 JSX 的字符串解析为 JSX 组件

编程问答 2022-05-29

问题描述

我目前正在尝试将包含 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，我不打算弹出。

我尝试了以下方法：

  1. dangerouslySetInnerHTML 这在检查我得到的元素时不起作用：
<span>foo <span className="{classes.heading}">bar</span></span>

我如何实现这一目标，确保应用我的样式？

另外，内部的 html <span/> 标签是 Material-UI <Typography/> 组件，我不得不更改它，因为在使用以下函数后解析它会将组件名称更改为：<typography/>来自这些包：

  1. import parse from 'html-react-parser';
  2. import ReactHtmlParser from 'react-html-parser';
  3. 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 (将#修改为@）

dangerouslysetinnerhtmldangerouslysetinnerhtmljsxjsxjsxreactjsreactjsreactjsreactjswebpackwebpackwebpack