Reactjs Gutenberg blocks:RichText显示HTML标记的默认值

当我在下面的Gutenberg块中包含标记时，它会在编辑器和前端中输出HTML标记。这仅在默认文本中发生——当从编辑器中添加链接时，它会正确呈现：

attributes: {
  text: {
    type: 'array',
    source: 'children',
    selector: 'p',
    default: 'Here is the test <a href="https://example.com">link</a>',
  },
}

edit: ({ attributes: { text }, setText ) => {
  return <RichText
    placeholder="Text..."
    tagName="p"
    onChange={setText}
    value={text}
    allowedFormats={['core/bold', 'core/italic', 'core/link']}
  />
}

save: () => {
  return <RichText.Content tagName="p" value={text} />
}

如何获取此默认文本以输出标记本身？

该组件仅支持纯文本。但是，通过在块特性中定义示例内容，可以添加预格式化内容，如链接和其他受支持的格式：

...
attributes: {
    text: {
        type: 'array',
        source: 'html',
        selector: 'p'
    },
},
example: {
    attributes: {
        text: 'Here is the test <a href="https://example.com">link</a>'
    }
},
...

。。。
属性：{
正文：{
键入：“数组”，
来源：“html”，
选择器：“p”
},
},
例如：{
属性：{
文本：“这是测试”
}
},
...

---

通过定义示例属性，

占位符=…

和

默认值：…

不再需要，“示例链接”将可编辑。

谢谢！最终使用format helper生成HTML，但这是一个很好的解决方案。

default: 'Here is the test <a href="https://example.com">link</a>'

Here is the test <a href="https://example.com">link</a>

default: `Here is the test ${<a href="https://example.com">link</a>}`

Here is the test [object Object]

...
attributes: {
    text: {
        type: 'array',
        source: 'html',
        selector: 'p'
    },
},
example: {
    attributes: {
        text: 'Here is the test <a href="https://example.com">link</a>'
    }
},
...