我正在显示存储在数据库中的文本。数据来自 firebase 作为字符串(包括换行符)。为了使其显示为 HTML,我最初执行了以下操作:
<p className="term-definition"
dangerouslySetInnerHTML={{__html: (definition.definition) ? definition.definition.replace(/(?:\r\n|\r|\n)/g, '<br />') : ''}}></p>
这很好用。但是,还有一个附加功能。用户可以键入[word]
,该单词将成为链接。为了实现这一点,我创建了以下函数:
parseDefinitionText(text){
text = text.replace(/(?:\r\n|\r|\n)/g, '<br />');
text = text.replace(/\[([A-Za-z0-9'\-\s]+)\]/, function(match, word){
// Convert it to a permalink
return (<Link to={'/terms/' + this.permalink(word) + '/1'}>{word}</Link>);
}.bind(this));
return text;
},
我省略了该this.permalink
方法,因为它不相关。如您所见,我正在尝试返回<Link>
从 react-router 导入的组件。但是,由于它是原始 HTML,dangerouslySetInnerHTML
因此不再正常工作。
所以我有点卡在这一点上。我可以做些什么来格式化内部文本并创建链接?