react中jsx文件是如何转换成js对象的

转载于 2019-02-21 16:26:00 发布 · 722 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/lidedong/p/10413419.html

本文详细解析了如何使用Babel将JSX语法转换为标准的JavaScript对象，具体展示了从带有事件处理和嵌套标签的JSX代码到React.createElement调用的转换过程。

通过在线babel转换器，转换出jsx是如何变成js对象的

jsx文件

加入了正常的标签以及嵌套标签以及方法属性

function hello() {
  click=()=>{
    console.log("hello")
  }
  return <div>
          <button onclick={this.click.bind(this)}>
            helloWorld
          </button>
          </div>;
}

通过babel转换之后

"use strict";

function hello() {
  click = function click() {
    console.log("hello");
  };

  return React.createElement("div", null, React.createElement("button", {
    onclick: this.click.bind(this)
  }, "helloWorld"));
}