Javascript 从后端显示文章并使用html设置样式

我有一个后端，返回我作为字符串的整个文章正文文本。在我的网站上，我想用不同的HTML/CSS样式创建每一篇文章，例如，当文章太长时，使用

标记来打断文章。但是有些文章不会很长，所以我不能在前端组件中放置

标记

由于我的前端组件并没有随着文本的大小而改变，所以我想出了一个主意，将

标记直接存储在文章字符串文本中。但是数据是以字符串的形式出现的，其中包含

标记，这些标记也被视为字符串，因此它对样式设置没有影响

---

我是否应该从字符串中转义这些标记？还是有更好的方法？我不知道应该如何正确地完成它。

如果您使用

innerHTML

，那么它应该正确地工作-假设您没有使用

，因为它不是有效的HTML实体（

和

）


const text1='1。这是一行
这应该是下一行。”
常量text2='2。这是一行
这应该是下一行。”
常量text3='3。这是一行
这应该是下一行。”
document.getElementById（'text1'）。innerHTML=text1//预期无法正常工作
document.getElementById（'text2'）。innerHTML=text2//应能正常工作
document.getElementById（'text3'）。innerHTML=text3//预期工作正常



如果您使用
innerHTML
，那么它应该能够正常工作-假设您没有使用

，因为这不是有效的HTML实体（

和

）


const text1='1。这是一行
这应该是下一行。”
常量text2='2。这是一行
这应该是下一行。”
常量text3='3。这是一行
这应该是下一行。”
document.getElementById（'text1'）。innerHTML=text1//预期无法正常工作
document.getElementById（'text2'）。innerHTML=text2//应能正常工作
document.getElementById（'text3'）。innerHTML=text3//预期工作正常



如果您接收到的原始html内容中已经包含了要在ReactJS中呈现的标记标记，那么您需要使用React的
危险的html
属性。根据您从后端接收到的标记的存放位置，您的
Render
函数中的代码看起来如下所示：

<div dangerouslySetInnerHTML={this.state.recievedArticleRawText} />



有关使用注意事项和警告，请参见此处的官方文档：

本质上，React团队故意将此命名为“危险的”
，因为只有当您100%完全信任所设置的值时，才应该使用它。永远不要设置用户为此属性输入的值，因为它会为各种注入留下漏洞。
如果您接收到的原始html内容中已经有要在ReactJS中呈现的标记标记，则需要使用React的
危险的LysetinerHTML
属性。根据您从后端接收到的标记的存放位置，您的
Render
函数中的代码看起来如下所示：

<div dangerouslySetInnerHTML={this.state.recievedArticleRawText} />



有关使用注意事项和警告，请参见此处的官方文档：

本质上，React团队故意将此命名为“危险的”
，因为只有当您100%完全信任所设置的值时，才应该使用它。永远不要将用户输入的值设置为该属性，因为它会为各种注入留下漏洞。
后端使用的是什么平台？如何“接收”每篇文章？@willman我使用AWS DynamoDB作为后端，使用ReactJS作为前端。@willman我通过简单的HTTP GET接收文章，作为回报，我得到了对象，包括文章标题、文章id、文章正文文本。这个正文文本应该有不同的样式，较长的文本应该有特征线，或者一些单词应该更粗体，但我不确定它的样式。你的后端使用的是什么平台？如何“接收”每篇文章？@willman我使用AWS DynamoDB作为后端，使用ReactJS作为前端。@willman我通过简单的HTTP GET接收文章，作为回报，我得到了对象，包括文章标题、文章id、文章正文文本。这个正文文本应该有不同的样式，较长的文本应该有特征线，或者一些单词应该更粗体，但我不确定它的样式。@muka.gergley我使用的是ReactJS，所以调用文档不是一个好的选择。您是对的，
无效，但当我在没有空格的情况下编写它时，此编辑器实际上将执行特征线，并且不显示标记。@muka.gergley我使用的是ReactJS，因此调用文档将不是一个好选项。您是对的，
无效，但当我在没有空格的情况下编写它时，此编辑器实际上将执行特征线，并且不显示标记。是的，这对我很有用。我发现它很容易被跨站点脚本攻击，任何阅读它的人都应该知道这一点。但对我来说这很好。谢谢@willman。是的，你是对的，这就是为什么React团队用
前缀危险地命名这个属性。我已经更新了我的答案，为未来的读者提供了适当的警告。是的，这对我很有用。我发现它很容易被跨站点脚本攻击，任何阅读它的人都应该知道这一点。但对我来说这很好。谢谢@willman。是的，你是对的，这就是为什么React团队用
前缀危险地命名这个属性。我已经更新了我的答案，为未来的读者提供了适当的警告。