`

React Render运行绑定并显示HTML标签内容

阅读更多

默认情况下,React Render不允许插入html标签的,为了避免xss攻击

<div className='body'>
   {this.props.description}
</div>

 

所以上面默认情况下你这样使用都是不能显示换行功能的:

confirm('Are you sure?', {
      description: '遇到点问题!<br/>请尝试下载(更新)新版点融APP,并在投资页面使用该券。'
});

or

confirm('Are you sure?', {
      description: '遇到点问题!\n请尝试下载(更新)新版点融APP,并在投资页面使用该券。'
});

 

解决方案,需要开启html显示功能:

<div className='modal-body' dangerouslySetInnerHTML={{__html: this.props.description}}></div>

 

这样的话,你的html标签(换行)就可以正常显示了。

 



有疑问或技术交流,扫描公众号一起讨论学习。

更多React在线学习访问:http://each.sinaapp.com/react/index.html

 

更多实例应用扫码体验:

  • 大小: 22.9 KB
  • 大小: 5.5 KB
  • 大小: 7.3 KB
分享到:
评论

相关推荐

    快速将React组件渲染成Stringhtml的工具

    `renderToString`方法会把React组件转化为完整的HTML字符串,包含所有的数据绑定和事件处理;而`renderToStaticMarkup`则生成无JavaScript的静态HTML,适合用于生成静态页面。 假设这个工具是基于上述概念进行优化...

    03 React 创建组件、绑定属性( 绑定class 绑定style)、引入图片 循环数组渲染数据

    类组件则需要继承自React.Component,并实现render方法: ```jsx class MyComponent extends React.Component { render() { return &lt;h1&gt;Hello, {this.props.name}!; } } ``` 2. **属性绑定**: - **绑定...

    react之旅(二)react项目目录结构,创建组件,绑定数据

    实践是学习React最好的方式,通过分析和运行示例代码,你可以更好地掌握这些概念并提升自己的开发技能。 总之,React项目的目录结构旨在提高代码的可维护性和组织性,而组件和JSX则是React的核心特性,用于构建动态...

    【JavaScript源代码】浅谈React双向数据绑定原理.docx

    然而,与 Vue.js 不同,React 并不原生支持双向数据绑定。在 Vue 中,双向数据绑定是通过 `Object.defineProperty`(在 Vue 2.x 中)或 `Proxy`(在 Vue 3.x 中)来实现的,而 React 需要开发者手动处理数据与视图间...

    react入门学习文档

    我们可以通过添加一个 DOM 容器到 HTML,然后添加 Script 标签引入 React,最后编写 React 代码来实现 Hello World。 JSX 元素渲染 JSX 元素渲染是 React 的核心技术。我们可以使用 JSX 语法来描述组件的结构和...

    react-react面试题之事件绑定方式.zip

    在React的类组件中,事件处理函数通常作为类的方法定义,然后在 render 方法中绑定。例如,`onClick={this.handleClick.bind(this)}`。这种方式在组件实例化时会执行一次`bind`,确定`this`指向,避免了箭头函数的...

    webpack-react-redux-server-side-render-example, 带有服务器端呈现的示例 React/Redux/Webpack 项目.zip

    webpack-react-redux-server-side-render-example, 带有服务器端呈现的示例 React/Redux/Webpack 项目 这里示例项目演示了一个反应/redux应用程序,其中带有与 web service绑定的可选服务器端呈现。功能反作用力...

    2022年前react面试题整理收藏(同事面试用的).pdf

    React 并不是将点击事件绑定到了 div 的真实 DOM 上,而是在 document 处监听了所有的事件,当事件发生并且冒泡到 document 处的时候,React 将事件内容封装并交由真正的处理函数运算。这样的方式不仅仅减少了内存的...

    「2021」高频前端面试题汇总之React篇.pdf

    React 并不是将点击事件绑定到了 div 的真实 DOM 上,而是在 document 处监听了所有的事件,当事件发生并且冒泡到 document 处的时候,React 将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的...

    react-linkState将事件绑定至state支持Preact和React

    在React和Preact这两个流行的JavaScript库中,管理组件状态是应用程序功能的核心部分。`linkState`是一个方便的辅助函数,它简化了将事件处理器与组件状态之间的绑定过程。本篇文章将深入探讨`linkState`的功能、...

    入门级react面试题贼细+答案(强顶).pdf

    React并不是将click事件绑定到了真实DOM上,而是在document处监听了所有的事件,当事件发生并且冒泡到document处的时候,React将事件内容封装并交由真正的处理函数运⾏。这样的方式不仅减少了内存的消耗,还能在组件...

    react-操作favicon的React组件可作为加载或进度指示器

    "react-loadcon"的核心功能在于它能够改变浏览器标签页的favicon图标,以此来显示应用程序的状态。例如,在数据请求期间,可以将favicon更改为一个旋转的加载图标,让用户知道后台正在处理数据。当加载完成或有错误...

    React中文文档.docx

    `render()`接收输入参数,并返回一个React元素,可以是JSX(一种类似XML的语法,方便在JS中描述结构)。JSX不是必需的,可以纯用JavaScript编写,但JSX通常使代码更易读。组件可以有状态(stateful),意味着它们能...

    浅谈vue,angular,react数据双向绑定原理分析

    浅谈vue,angular,react数据双向绑定原理分析 在前端开发中,数据双向绑定是指视图和模型之间的同步更新机制。当模型数据改变时,视图会自动更新;反之,当视图发生变化时,模型数据也会同步更新。本文将对Vue、...

    React实现双向绑定示例代码

    在React中,由于其虚拟DOM的特性,通常我们并不直接实现双向绑定,而是通过事件监听和状态更新来模拟这一过程。下面我们将详细探讨如何在React中实现双向绑定,并给出示例代码。 首先,React官方并未内置直接支持...

    React中的render何时执行过程

    在本文中,我们将深入探讨 React 中的 render 何时执行过程,并分析其在组件更新时的执行机制。 首先,让我们了解 React 中的组件生命周期。在组件实例化和存在期时,render 都会被执行。在实例化时,...

    react-griddlereact采用React编写的简单网格组件

    如果你打算深入研究或贡献到Griddle项目,可以解压这个文件并查看其内容。 总的来说,React的Griddle组件为开发者提供了强大的数据网格功能,帮助他们构建灵活、高性能的数据展示应用,同时保持React的简洁性和可...

    React利用插件和不用插件实现双向绑定的方法详解

    在React中,双向数据绑定并不是默认行为,因为React推崇的是单向数据流,即数据从父组件流向子组件。然而,开发者有时会需要双向绑定功能,尤其是在表单处理中,以便用户输入的数据能实时更新到组件的状态。本文将...

    react-利用d3js绘制漂亮的React3D饼状图

    D3.js是一个强大的JavaScript库,它允许开发者绑定任意数据到DOM,并根据数据操作DOM来更新视图。React则是一个用于构建用户界面的JavaScript库,擅长管理组件状态和渲染UI。下面我们将详细探讨如何在React项目中...

    react-reactdatepicker一个简单和可重用的日期选择器React组件

    5. **事件处理**:当用户选择日期时,`react-datepicker`会触发onChange事件,你可以绑定处理函数来获取用户选择的日期。 6. **自定义样式**:组件提供了丰富的CSS类名,方便通过CSS进行样式定制,也可以使用CSS-in...

Global site tag (gtag.js) - Google Analytics