React dangerouslySetInnerHTML - 将HTML字符串解析为html样式显示在table的扩展中

最新推荐文章于 2024-07-25 10:54:59 发布

bellus-

最新推荐文章于 2024-07-25 10:54:59 发布

阅读量1.9w

点赞数 1

分类专栏： node.js 文章标签： ant 扩展 table

知识共享。

本文链接：https://blog.csdn.net/xiaoyu19910321/article/details/74912592

版权

node.js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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