React dangerouslySetInnerHTML

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>        );    }}