最新消息:ocsen.wang域名正式启用了!

Reactjs-让React正常显示你的html代码

JavaScript ocsen 946浏览

最近在使用reactjs 做项目的时候,遇到了需要循环 html 片段 或者 拼接 html的时候,发现渲染之后的结果是原始的代码。比如

var text = ''222";

var html = <a href="#">我是链接 + text</a>

return html ;

render 之后的结果是 html 是源码渲染出来,不做html标签的编译。这个就蛋痛了。。。

于是。。

https://facebook.github.io/react/tips/dangerously-set-inner-html.html

function createMarkup() { return {__html: 'First &middot; Second'}; }; <div dangerouslySetInnerHTML={createMarkup()} />

react 需要通过 dangerouslySetInnerHTML 方法来编译html标签

贴一段代码具体的运用:

render: function(text, record) {
        function renderCustomHTML() {
            var html = '';
            if (record.detail.extra) {
                var extra = JSON.parse(record.detail.extra);
                if (extra.traceId) {
                    html = '<'a style="margin-left:5px;" target="_blank" href="http://lurker.stable.mogujie.org/html/link_detail.html?traceId=' + extra.traceId + '">链路跟踪'<'/a'>';
                }
            }
            return {
                __html: text + html
            };
        }
        return (
            '<' div dangerouslySetInnerHTML={renderCustomHTML()} '>''<'/div'>'
        );
    }

转载请注明:Ocsen-因上努力,果上随缘 » Reactjs-让React正常显示你的html代码

111