我正在编写一个电子应用程序，它可以像 Hyperterm 一样进行扩展。可以延长。我正在尝试找到一个系统，允许在屏幕上渲染某些文本之前对其进行任意转换。
假设我有一个简单地呈现为跨度的组件文本。
const Text = ({text}) => <span>{text}</span>
但根据文本包含的内容，插件可能会改变它的外观。也许某些插件会:
- 将网址替换为
<a>标签 - 粗体文本被
**包围， Markdown - 为某些重要单词着色
- 替换
:emoji:与<img>
我有哪些选择可以实现这一目标？这是高阶组件可以帮助解决的问题吗？或者我可以更改 Text组件，以便它可以接受某种形式的转换元数据并知道要渲染为什么 HTML？
最佳答案
如果安全且适合您的用例，您可以将 dangerouslySetInnerHTML 与解析函数一起使用
const parseText = text => ...
const createMarkup = text => ({__html: parseText(text)})
const Text = ({text}) => <span dangerouslySetInnerHTML={createMarkup(text)} />
关于javascript - 如何任意变换组件渲染输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39338894/