JSX怎么解析HTML标签？

Question

let h = '<a>test</a>';

<div>{h}</div> // <div><a>test</a></div>

想知道怎么解析html？

Answer 1

react中采用dangerouslySetInnerHTMl解析html标签

使用方法：

 <div dangerouslySetInnerHTML={{
        __html: '<h3>我是h3</h3>'
    }}>
</div>

之所以会这么难写可能是出于安全性的考虑，防止xss攻击 参考链接

Answer 2

jsx是语法糖，最终转译目标都会成类似于

let h = React.createElement('a',null,[{text:'test'}]);
React.createElement('div',null, [h]);

+++++

如果加一个 render函数，你应该可以理解

function render(virtualDom) {
    var element = document.createElement(virtualDom.type);
    // ...设置属性等
    if(virtualDom.children) {
        var markup = render(virtualDom[0]);
        //...
    }
    // 递归子元素等
    return element;
}