将字符串转换为React JSX

Convert string to React JSX

提问人：howrad 提问时间：10/4/2020 更新时间：4/8/2021 访问量：1845

问：

目标：我想将包括 React 组件在内的字符串转换为功能齐全的 JSX。

更简单的例子是，Stack Overflow 上有许多解决方案，是这样的：

render()
{
  let txt = "<span><b>Hello World!</b></span>";

  return <div dangerouslySetInnerHTML={{__html: txt}}></div>;
    //---OR---
  return ReactHtmlParser(txt); //using react-html-parser
    //---OR---
  return parse(txt); //using html-react-parser
}

但是，如果相反，其中 MyComponent 是一个自定义 React 组件，我找不到浏览器正确解释它的方法。let txt = "<MyComponent/>";

使用某些方法，它将以小写形式输入 DOM。通过其他技巧，我可以将其作为大写字母放入 DOM 中。但是浏览器不会将 MyComponent 解释为 React 组件，也不会执行里面的代码。<mycomponent><mycomponent/><MyComponent><MyComponent/>

我对答案不感兴趣，因为我不想一次将其用于一个组件。我想解析JSX的长字符串。React.createElement()

reactjs dom html 解析

评论

1赞 backtick 10/4/2020
你看过 MDX 吗？它是 Markdown 的扩展，但仍然应该满足您的用例。
0赞 howrad 10/5/2020
@backtick感谢您向我展示 MDX。你是对的，它可能满足我的用例，我会进一步调查。
0赞 howrad 10/5/2020
@backtick mdxjs.com 的 Introduction 和 Playground 页面基本上可以做我想要的，通过渲染到 React 组件中的 <textarea>。我假设这些页面正在使用是否正确？@mdx-js/runtime
0赞 backtick 10/6/2020
这是 playground 页面的源代码。
0赞 aldobsom 10/18/2020
到目前为止，@howrad运气好吗？

答：

0赞 Dennis Vash 10/4/2020 #1

没有库可以解析包含自定义 React 组件的字符串。

如果你考虑一下，这样的库需要知道你的组件位置，因为它需要导入和渲染它。此外，组件的实际名称在 React 中是没有意义的，你必须在范围内有它的实例可用。

因此，您唯一的解决方案是为您自己的编写自定义解析器。

这样的解决方案将大致包含一个字典，该字典将字符串映射到它们的组件（也需要处理道具和重复命名）。

import {MyComponent,Button} from 'components';

export const Components = {
   MyComponent,
   Button
};

myParser('<MyComponent/>'); // Match MyComponent

您可以使用 ReactDOMServer，因此您有元素实例来呈现其 HTML。

评论

0赞 howrad 10/5/2020
Dennis，当你制作 React 小提琴时，JSFiddle 使用什么？在某种程度上，它必须执行在浏览器中以字符串形式出现的 React 代码。
0赞 Dennis Vash 10/5/2020
它不是，它只是在其他服务器上运行一台机器
0赞 Troy Alford 10/22/2021
@DennisVash实际上，这正是它的作用，正如您所说，它通过允许实现器提供名称到组件函数的映射来做到这一点。然后，解析器本质上充当 Jsx 的运行时解释器，并绑定到任何正在转换为本机 HTML 或已在映射中提供的组件。我是库的作者，所以我有偏见 - 但它可能是解决这个问题的好方法。react-jsx-parser
0赞 Steve Tomlin 4/8/2021 #2

您可以使用 -

  • html-react-解析器
  • react-jsx-解析器

上一个：如何使用数组中的数据解析html模板？

下一个：当正则表达式模式与字符串中的任何位置不匹配时该怎么办？