美文网首页
JSX 表达式中显示 HTML 实体

JSX 表达式中显示 HTML 实体

作者: mengxr | 来源:发表于2017-07-26 20:38 被阅读23次

JSX 表达式中显示 HTML 实体

  • JSX是HTML和JS混合写的语法
  • 遇到<,就当html解析
  • 遇到{就当JS解析
  • 在JSX中可以通过用大括号{}来加入JavaScript表达式

问题

  • 当在JS表达式中显示HTML实体的时候,可能会遇到二次转译的问题
  • 业务场景
  • 新闻业务,内容为网络上抓的各种文章,是HTML实体
  • 代码例子
    render () {

        const newContent = '<div>我是新闻内容</div>';

        return (

            <div>

                { newContent }

            </div>

        )

    }
  • 显示结果
image.png

原因

  • 因为react会默认转译所有字符串,防止XSS攻击。

解决方式

  • 使用dangerouslySetInnerHTML
    render () {

        const newContent = '<div>我是新闻内容</div>';

        return (

            <div>

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

            </div>

        )

    }
  • 显示结果


    image.png

相关文章

  • JSX 表达式中显示 HTML 实体

    JSX 表达式中显示 HTML 实体 JSX是HTML和JS混合写的语法 遇到<,就当html解析 遇到{就当JS...

  • 初识React-JSX

    JSX 1.Javascript表达式嵌入到jsx中;html中需要引入js: 2.JSX作为表达式 3.属性指定...

  • JSX简介

    jsx——一种JavaScript的语法扩展,在html中写入js 在jsx中使用表达式,在jsx当中的表达式要包...

  • React(JSX 语法)

    一、JSX 语法 1.在 JSX 中嵌入表达式:在 JSX 中嵌入表达式,必须用{}将表达式括起来。 2.JSX ...

  • 基础概念

    JSX 可以是 html 标签,也可以是自定义组件 在 JSX 中嵌入表达式 {} 我们可以在{}中书写任意的 J...

  • react学习笔记

    1. Jsx语法 在html中属性的值通过双引号(字符串数据)或者大括号(表达式) 注意:react对于jsx中的...

  • JSX简介

    声明一个JSX变量 可见jsx声明的时候既不是字符串也不是HTML标签 嵌入javascript表达式 jsx可以...

  • react使用

    React JSX XML 被设计用来传输和存储数据HTML 被设计用来显示数据 JSX 就是 JavaScrip...

  • React(一)

    特点 声明式设计 高效 灵活 JSX 组件 单向数据流 第一个实例 JSX JS表达式 样式 数组 HTML标签&...

  • React基础学习总结

    一、JSX语法 1、花括号 { } 把任意的 [JavaScript 表达式]嵌入到 JSX 中 2、JSX可作表...

网友评论

      本文标题: JSX 表达式中显示 HTML 实体

      本文链接:https://www.haomeiwen.com/subject/iviokxtx.html