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

How to arbitrarily transform component render output

本文关键字：输出 组件 何任意 转换      更新时间：2023-09-26

我正在写一个电子应用程序，它可以扩展，就像Hyperterm可以扩展一样。我试图找到一个系统，允许一些文本被任意转换之前，它呈现在屏幕上。

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

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

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

  • 用<a>标签替换url
  • 粗体文本被**包围，一个la markdown
  • 给某些重要的单词上色
  • 将:emoji:替换为<img>

我有什么选择来实现这个?高阶分量能帮上忙吗?或者我是否可以更改Text组件，使其能够接受某种形式的转换元数据，并知道以何种HTML形式呈现?

您可以使用dangerouslySetInnerHTML和解析函数，如果它是安全的，适合您的用例

const parseText = text => ...
const createMarkup = text => ({__html: parseText(text)})
const Text = ({text}) => <span dangerouslySetInnerHTML={createMarkup(text)} />
相关文章：