如何随意转换组件渲染输出

Question

我正在编写一个可以扩展的电子应用程序，与Hyperterm可以扩展的方式不同。我试图找到一个系统，允许一些文本在屏幕上呈现之前被任意转换。

所以，让我说我有一个组件文本只是渲染为一个跨度。

const Text = ({text}) => <span>{text}</span>

但是根据文本包含的内容，插件可能会改变它的外观。也许一些插件会：

• 将网址替换为<a>代码
• 由**包围的粗体文字，la markdown
• 着色某些重要的字词
• 将:emoji:替换为<img>

我有什么选择来实现这一目标？这是高阶组件可以帮助的东西吗？或者我可以更改Text组件，以便它可以接受某种形式的转换元数据并知道要呈现的HTML格式吗？

Answer 1

如果它是安全且适合您的用例，您可以使用dangerouslySetInnerHTML以及解析功能

const parseText = text => ...
const createMarkup = text => ({__html: parseText(text)})
const Text = ({text}) => <span dangerouslySetInnerHTML={createMarkup(text)} />