显示draftjs中的数据块

Question

如何在我的反应组件中显示我从 draftjs编辑器保存到mongodb的原始内容？

这就是我在数据库中的内容：

"blocks" : [ 
            {
                "key" : "7abte",
                "text" : "example",
                "type" : "unstyled",
                "depth" : 0,
                "inlineStyleRanges" : [ 
                    {
                        "offset" : 0,
                        "length" : 20,
                        "style" : "BOLD"
                    }
                ],
                "entityRanges" : []
            }
        ]

我发现如何将其返回到编辑器（编辑数据），一切都很好。但我无法在前台展示它。

我也尝试将我的编辑器内容导出为语义HTML，这就是我收到的内容：

但是就像你看到的那样，我不知道如何显示它，不是作为字符串而是作为html ..

你对我的问题有什么好的解决方案吗？

Answer 1

如果您需要处理要在前端显示的HTML，您应该使用以下内容：

<div dangerouslySetInnerHTML={{__html: YourMarkupVar}} />

否则，React作为安全措施，将对标签进行编码并显示为普通文本。