React dangerouslySetInnerHTML - 将HTML字符串解析为html样式显示在table的扩展中
2017-07-10 13:39
1546 查看
20170721更新文章(底部)
环境 node react ant design(蚂蚁金服标签)
原本样例:蚂蚁金服直接样例
我们的数据 第四个字段存储的是html片段,实际上是一个 表格数据。但是直接放进其 显示的是 字符串 ,没有被html渲染。
下面是渲染的方法:dangerouslySetInnerHTML
将上面的expandedRowRender方法添加标签渲染字符串为html
修改前:
functionexpandedRowRender(record){return<p>{record.description}</p>;}
修改后:
function
showhtml(record){
var html = {__html:record.description};
return <div dangerouslySetInnerHTML={html}></div> ;
}
其中 必须将要渲染的字段变为 var html = {__html:record.description}
形式 。
参考很多博客资料
主要有:
http://wiki.jikexueyuan.com/project/react/dangerously.html http://www.cnblogs.com/shamgod/p/5052312.html(写的很好)
20170721更新
将方法改到
Component 组件里
class Log extends React.Component {
constructor(props) {
super(props);
this.state = {
outputMsg: '',
inputMsg: '',
params: {},
pagination: { pageSize: 10, showQuickJumper: true },
loading: false,
tableData: []
};
}
showhtml(record) {
let html = { __html: record.context };
return <div dangerouslySetInnerHTML={html}></div>;
}
componentDidMount() { //初始化
//...
}
render() {
return (
<div>
<Table columns={columns} rowKey={record => record.id}
dataSource={this.state.tableData}
pagination={this.state.pagination} loading={this.state.loading}
expandedRowRender={this.showhtml.bind(this)}
/>
</div>
);
}
}
环境 node react ant design(蚂蚁金服标签)
原本样例:蚂蚁金服直接样例
我们的数据 第四个字段存储的是html片段,实际上是一个 表格数据。但是直接放进其 显示的是 字符串 ,没有被html渲染。
下面是渲染的方法:dangerouslySetInnerHTML
将上面的expandedRowRender方法添加标签渲染字符串为html
修改前:
functionexpandedRowRender(record){return<p>{record.description}</p>;}
修改后:
function
showhtml(record){
var html = {__html:record.description};
return <div dangerouslySetInnerHTML={html}></div> ;
}
其中 必须将要渲染的字段变为 var html = {__html:record.description}
形式 。
参考很多博客资料
主要有:
http://wiki.jikexueyuan.com/project/react/dangerously.html http://www.cnblogs.com/shamgod/p/5052312.html(写的很好)
20170721更新
将方法改到
Component 组件里
class Log extends React.Component {
constructor(props) {
super(props);
this.state = {
outputMsg: '',
inputMsg: '',
params: {},
pagination: { pageSize: 10, showQuickJumper: true },
loading: false,
tableData: []
};
}
showhtml(record) {
let html = { __html: record.context };
return <div dangerouslySetInnerHTML={html}></div>;
}
componentDidMount() { //初始化
//...
}
render() {
return (
<div>
<Table columns={columns} rowKey={record => record.id}
dataSource={this.state.tableData}
pagination={this.state.pagination} loading={this.state.loading}
expandedRowRender={this.showhtml.bind(this)}
/>
</div>
);
}
}
相关文章推荐
- dangerouslySetInnerHTML, 让React正常显示你的html代码
- dangerouslySetInnerHTML, 让React正常显示你的html代码
- dangerouslySetInnerHTML, 让React正常显示你的html代码和<br/>
- React渲染动态HTML——dangerouslySetInnerHTML
- react dangerouslySetInnerHTML
- react.js使用非元素属性dangerouslySetInnerHTML
- React的dangerouslySetInnerHTML与Angular的ng-bind-html
- 使用v-html解决Vue.js渲染过程中html标签不能被解析(html标签显示为字符串)
- html解析json数据为表格table显示
- react中将带标签的字符串转义为html解析
- Firefox - 附加组件 - 扩展 - Firebug - HTML视图 - Style样式选项卡 - 显示计算样式不显示所有可用的样式
- ant table 扩展 显示html文档 格式化json字符串 并且 实时动态关键字高亮
- (转)写的html页面引用外部css文件的时候在IE7,IE8和FF中能正常作用,即能正常显示,可在IE6中却完全没有作用到,即css文件里的样式根本未被解析到我们的html页面,这是什么原因?
- [置顶] ajax请求得到后台数据,前台页面,使用table模板然后clone,显示表格,,不用append拼接 “字符串和HTML表格标签”
- dangerouslySetInnerHTMl
- 设置原始的HTML:dangerouslySetInnerHTML
- 使用v-html解决Vue.js渲染过程中html标签不能被解析(html标签显示为字符串)
- React 如何解析从后台读取的内容是html格式代码(带样式)
- Dangerously Set innerHTML
- 有html代码的变量显示字符串而不是html解析显示