`

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
分享到:
评论

相关推荐

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

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

    react-react-redux:使用React Hooks和Proxy的React Redux绑定

    react-react-redux v5-alpha(此存储库):具有useMutableSource的实验性react-redux绑定。 它提供了useTrackedState,它可以跟踪render中状态的使用,它最初是在此repo中提出的。 :该项目将为useTrackedState...

    babel-plugin-react-binding:React的两种方式绑定糖

    Babel插件React绑定React的两种方式绑定糖。用法安装npm i babel-plugin-react-binding --save-dev将react-binding添加到.babelrc { "plugins" : [ [ "react-binding" , { // options } ] ]}在React JSX中使用绑定!...

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

    以前对于双向绑定概念来自于Angular.js,现在我用我感兴趣的react.js来实现这样的方式。 有2种方式分析,1:不用插件,2:用插件 (引入react.js操作省略。。。) 不用插件: 先创建react组件 var NoLink = React....

    redux-render:使用渲染功能进行React的人体工程学Redux绑定

    使用渲染道具ReactRedux的绑定。 const Title = ( ) =&gt; ( &lt; Redux xss=removed xss=removed&gt; state . title } &gt; { title =&gt; ( &lt; h1&gt; { title } &lt; / h1 &gt; ) } &lt; / Redux &gt; ) 为什么要使用这个? 渲染...

    React.js绑定this的5种方法(小结)

    下面一起来看看React this的5种绑定方法。 1.使用React.createClass 如果你使用的是React 15及以下的版本,你可能使用过React.createClass函数来创建一个组件。你在里面创建的所有函数的this将会自动绑定到组件上...

    react-images-loaded:React图像加载库的绑定

    React图像加载对事件系统的React进行绑定道具名称类型永远功能onProgress 功能失败功能完毕功能背景字符串/布尔用法示例// ES6import ImagesLoaded from 'react-images-loaded' ;// ES5const ImagesLoaded = require...

    react-touchable:React中的触摸绑定

    render: function () { return ( This element can be tapped or clicked ) } }) 道具 Touchable 需要一个onTap道具,它是必需的。 一旦有人点击您的元素,onTap 就会触发,它会随事件一起回调。 ...

    react-tvml:React与Apple TVJS和TVML的绑定

    React与Apple 绑定 (速度不慢,请单击gif观看视频) 安装 $ npm install --save react-tvml 例子 用法 var React = require ( 'react' ) ; var TVML = require ( 'react-tvml' ) ; var App = React . createClass ...

    react-mixpanel:Mixpanel的非官方React绑定

    React混合面板 该项目在上提供了简单的包装,以简化在React应用程序中使用Mixpanel的工作。 用法 使用以下命令安装: npm i react-mixpanel --save 然后像使用一样使用它。 在您的根App.js : 导入所需的模块: ...

    react-feathersjs:FeathersJS的ReactReact本机绑定

    React-FeathersJS 这个库提供了一种简单的方法来将您的React应用程序...import { render } from 'react-dom' ; import { FeathersProvider } from 'react-feathersjs' ; import App from './src' ; render ( &lt; App&gt;

    babel-plugin-react-scope-binding::meat_on_bone:React组件的Babel插件采用事件处理程序来自动绑定上下文

    babel插件React范围绑定React组件的Babel插件采用事件处理程序来自动绑定上下文。安装$ npm install babel-plugin-react-scope-binding --save-dev动机在构建React组件时,必须注意事件处理程序。 在组件中,默认...

    详解三种方式在React中解决绑定this的作用域问题并传参

    在React中时常会遇到this指向的作用域问题 从而导致undefined报错 先来个Demo: 功能很简单 点击按钮改变文字 import React from 'react'; export default class BindWithThis extends React.Component { ...

    react-bind-decorator:ES2016装饰器,可有效绑定组件的唯一类方法

    React绑定装饰器一个ES2016装饰器,可以自动绑定不是React.Component原型方法的所有唯一类方法。 它比React组件的core-decorator绑定装饰器更轻巧,更快。安装npm install react - bind - decorator -- save用法: ...

    react-demo:React演示

    数据流: React实现了单向React性数据流,这减少了样板,并且比传统数据绑定更容易推理。 新! 看看我们最新的项目 ,它使用React和JavaScript来创建本地移动应用程序。 。 例子 我们有几个例子。 这是让您入门的...

    governorjs:用于React的StateStore绑定

    总督状态经理由React.addons.update提供例子 var React = require ( 'react' )var governor = require ( 'governor' )var hub = governor . hubvar messageStore = function ( state ) { state . set ( 'some ...

    react.js 父子组件数据绑定实时通讯的示例代码

    react.js我自己还在摸索学习中,碰到父子组件数据绑定实时通讯的问题,研究了一下,分享给大家,也给自己留个笔记: import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter...

    React组件中的this的具体使用

    通过编写一个简单组件,并渲染出来,分别打印出自定义函数和render中的this: import React from 'react'; const STR = '被调用,this指向:'; class App extends React.Component{ constructor(){ super() } /...

    fluxette-react:React助焊剂的结合

    官方React绑定。 安装 npm install --save fluxette-react 装订 上下文一个更高阶的React组件,它在上下文中为其所有子组件提供一个Flux对象。 import { Context } from 'fluxette-react' ; import App from './app...

Global site tag (gtag.js) - Google Analytics