将字符串转换为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/>。通过其他技巧，我可以将其作为大写字母<MyComponent><MyComponent/>插入DOM中。但是浏览器不会将MyComponent视为React组件，也不会执行内部代码。

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

- howrad

---

你看过MDX吗？它是markdown的扩展，但应该能满足你的需求。 - backtick

这是游乐场页面的源代码。 - backtick

@howrad 迄今为止有什么进展吗？ - aldobsom

@aldobsom MDX和React Live都非常有前景。您需要将自定义的React组件传递到它们的作用域中。 - howrad

请参考以下链接：https://dev59.com/VFkS5IYBdhLWcg3wgXAQ - Steve Tomlin

Answer 1

你可以使用以下工具：

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

- Steve Tomlin

Answer 2

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

如果你仔细想一下，这样的库需要知道你的组件位置，因为它需要导入和渲染它。此外，在React中，组件的实际名称是无意义的，你必须在作用域中有其实例可用。

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

这样的解决方案大致上会持有一个将字符串映射到它们的组件的字典（还需要处理属性和重复命名）。

import {MyComponent,Button} from 'components';

export const Components = {
   MyComponent,
   Button
};

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

你可以使用ReactDOMServer，因此你可以使用元素实例来渲染其HTML。

- Dennis Vash

---

Dennis，当你创建一个React fiddle时，JSFiddle使用了什么？在某种程度上，它必须执行作为字符串传入浏览器的React代码。 - howrad

不是的，它只是在其他服务器上运行一个机器。 - Dennis Vash

@DennisVash实际上，这正是react-jsx-parser所做的事情，就像你说的那样，它通过允许实现者提供名称到组件函数的映射来实现。解析器本质上充当Jsx的运行时解释器，并绑定到将要转换为原生HTML或在映射中提供的任何组件。我是该库的作者，所以我有偏见，但它可能是解决这个问题的好方法。 - Troy Alford