将字符串转换为 React JSX

Question

目标：我想将包含 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
}

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

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

我对@9​​87654327@ 的答案不感兴趣，因为我不想一次将它用于一个组件。我想解析 JSX 的长字符串。

Answer 1

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

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

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

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

import {MyComponent,Button} from 'components';

export const Components = {
   MyComponent,
   Button
};

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

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

Answer 2

你可以使用 -

• html-react-parser
• react-jsx-parser