代码之家 › 专栏 › 技术社区 › Shane Harley

将HTML作为JSON字符串的一部分?

next.js json html javascript

Shane Harley · 技术社区 · 5 月前

想知道有没有办法做到这一点?我认为如果我使用危险的SetInnerHTML,我可以做到这一点,但理想情况下,我只会在我的p标签中调用它。

这是我的Json

  "login": [
    {
      "title": "Hello!",
      "blurb": "This is a secret direct link to enable login without a username and password. If you're having trouble accessing my portfolio via this link, please <a href=\"mailto: [email protected]\" className={`${styles.link}`}>contact me.</a>"
    }
  ]

然后在我的js文件(nextJS)中,我会这样做

<p className={`${styles.body} fadeIn`}>{cms.blurb}</p>

有什么办法吗?我可以在json文件中更改什么?尝试上述操作会导致HTML被附加到字符串中。危险的SetInnerHTML是有效的,但我认为我们应该尽量避免这种情况?

2 回复 | 直到 5 月前

antaresjeet 5 月前

您可以使用 html-react-parser 为了这个。只需安装该软件包并将其导入到您的组件中,如下所示:

import parse from 'html-react-parser';

然后在你的html中使用它:

<p className={`${styles.body} fadeIn`}>{parse(cms.blurb)}</p>

CcmU 5 月前

如果你 真正地 忍不住通过代码注入html,请注意您必须提供 dangerouslySetInnerHTML 一个包含 __html 关键,正是因为它太危险了。所以它应该是这样的

function YourLogin()   {
    return <p dangerouslySetInnerHTML = {'__html': cms.blurb}/>;
}

然而,我不能毫无保留地建议这种方法,因为它可能会导致 XSS .至少要确保 validate and sanitize every input that is not safe (剧透,这几乎是一切) defend yourself 尽你所能。

如果你没有动态内容,你不应该把事情搞得过于复杂。如果你真的需要在某事发生时出现或消失,试着 respond to events 或者使用js玩 visibility 属性或完全禁用元素。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前