默认情况下,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
相关推荐
webpack-react-redux-server-side-render-example, 带有服务器端呈现的示例 React/Redux/Webpack 项目 这里示例项目演示了一个反应/redux应用程序,其中带有与 web service绑定的可选服务器端呈现。功能反作用力...
react-react-redux v5-alpha(此存储库):具有useMutableSource的实验性react-redux绑定。 它提供了useTrackedState,它可以跟踪render中状态的使用,它最初是在此repo中提出的。 :该项目将为useTrackedState...
Babel插件React绑定React的两种方式绑定糖。用法安装npm i babel-plugin-react-binding --save-dev将react-binding添加到.babelrc { "plugins" : [ [ "react-binding" , { // options } ] ]}在React JSX中使用绑定!...
以前对于双向绑定概念来自于Angular.js,现在我用我感兴趣的react.js来实现这样的方式。 有2种方式分析,1:不用插件,2:用插件 (引入react.js操作省略。。。) 不用插件: 先创建react组件 var NoLink = React....
使用渲染道具ReactRedux的绑定。 const Title = ( ) => ( < Redux xss=removed xss=removed> state . title } > { title => ( < h1> { title } < / h1 > ) } < / Redux > ) 为什么要使用这个? 渲染...
下面一起来看看React this的5种绑定方法。 1.使用React.createClass 如果你使用的是React 15及以下的版本,你可能使用过React.createClass函数来创建一个组件。你在里面创建的所有函数的this将会自动绑定到组件上...
React图像加载对事件系统的React进行绑定道具名称类型永远功能onProgress 功能失败功能完毕功能背景字符串/布尔用法示例// ES6import ImagesLoaded from 'react-images-loaded' ;// ES5const ImagesLoaded = require...
render: function () { return ( This element can be tapped or clicked ) } }) 道具 Touchable 需要一个onTap道具,它是必需的。 一旦有人点击您的元素,onTap 就会触发,它会随事件一起回调。 ...
React与Apple 绑定 (速度不慢,请单击gif观看视频) 安装 $ npm install --save react-tvml 例子 用法 var React = require ( 'react' ) ; var TVML = require ( 'react-tvml' ) ; var App = React . createClass ...
React混合面板 该项目在上提供了简单的包装,以简化在React应用程序中使用Mixpanel的工作。 用法 使用以下命令安装: npm i react-mixpanel --save 然后像使用一样使用它。 在您的根App.js : 导入所需的模块: ...
React-FeathersJS 这个库提供了一种简单的方法来将您的React应用程序...import { render } from 'react-dom' ; import { FeathersProvider } from 'react-feathersjs' ; import App from './src' ; render ( < App>
babel插件React范围绑定React组件的Babel插件采用事件处理程序来自动绑定上下文。安装$ npm install babel-plugin-react-scope-binding --save-dev动机在构建React组件时,必须注意事件处理程序。 在组件中,默认...
在React中时常会遇到this指向的作用域问题 从而导致undefined报错 先来个Demo: 功能很简单 点击按钮改变文字 import React from 'react'; export default class BindWithThis extends React.Component { ...
React绑定装饰器一个ES2016装饰器,可以自动绑定不是React.Component原型方法的所有唯一类方法。 它比React组件的core-decorator绑定装饰器更轻巧,更快。安装npm install react - bind - decorator -- save用法: ...
数据流: React实现了单向React性数据流,这减少了样板,并且比传统数据绑定更容易推理。 新! 看看我们最新的项目 ,它使用React和JavaScript来创建本地移动应用程序。 。 例子 我们有几个例子。 这是让您入门的...
总督状态经理由React.addons.update提供例子 var React = require ( 'react' )var governor = require ( 'governor' )var hub = governor . hubvar messageStore = function ( state ) { state . set ( 'some ...
react.js我自己还在摸索学习中,碰到父子组件数据绑定实时通讯的问题,研究了一下,分享给大家,也给自己留个笔记: import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter...
通过编写一个简单组件,并渲染出来,分别打印出自定义函数和render中的this: import React from 'react'; const STR = '被调用,this指向:'; class App extends React.Component{ constructor(){ super() } /...
官方React绑定。 安装 npm install --save fluxette-react 装订 上下文一个更高阶的React组件,它在上下文中为其所有子组件提供一个Flux对象。 import { Context } from 'fluxette-react' ; import App from './app...