React中如何渲染HTML代码

    在开发过程中,后台返回的数据中有些数据要分条展示,所以遍历数组,给每条数据后面加入了换行标签<br/>,那么问题来了:怎么让reacr直接渲染HTML呢?

    经过查询官网知道reactdangerouslySetInnerHTML,可以解析并渲染html代码。

用法如下:

//其中item.helpContent是一个带有<br/>的字符串
<div style={{paddingLeft: 15, textIndent: 2}} dangerouslySetInnerHTML={{__html:item.helpContent}}>

原理:

1:dangerouslySetInnerHTMLReact标签的一个属性,类似于angularng-bind

2:有2个{{}},第一个{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对。

3:既可以插入DOM,又可以插入字符串。

注意dangerouslySetInnerHTML中必须是一个对象,再举一个例子:

function createEvent() {
  return {__html: 'First &nbsp;&nbsp;&nbsp; Second'};
}

function MyEvent() {
  return <div dangerouslySetInnerHTML={createEvent()}></div>;
}

    这是我遇到的问题解决方法,大家如果还有什么好的方法可以留言呀,一起进步ღ( ´・ᴗ・` )比心

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 12,584评论 2 21
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 11,431评论 0 9
  • 1、什么是react React.js 是一个帮助你构建页面 UI 的库。React.js 将帮助我们将界面分成了...
    谷子多阅读 7,370评论 1 13
  • 前言 在Jq,原生javascript时期,在写页面时,往往强调的是内容结构,层叠样式,行为动作要分离,三者之间分...
    itclanCoder阅读 4,055评论 0 2
  • react 基本概念解析 react 的组件声明周期 react 高阶组件,context, redux 等高级...
    南航阅读 4,728评论 0 1

友情链接更多精彩内容