如何任意变换组件渲染输出答案

【问题标题】：How to arbitrarily transform component render output如何任意变换组件渲染输出
【发布时间】：2016-09-05 23:55:00
【问题描述】：

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

假设我有一个组件 Text，它只是呈现为一个 span。

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

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

用<a>标签替换网址
** 包围的粗体文本，一个 la markdown
为某些重要的词着色
将:emoji: 替换为<img>

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

【问题讨论】：

标签： javascript reactjs text transform redux

【解决方案1】：

如果安全且适合您的用例，您可以将dangerouslySetInnerHTML 与解析函数一起使用

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

【讨论】：

这看起来值得一试。我应该注意什么 RE: 剥削？文本来自其他人，因此在转换之前对文本进行 html 转义似乎很明显。