JSX 表达式中显示 HTML 实体

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