React JSX语法解析过程和原理

最新推荐文章于 2023-03-08 10:53:15 发布

Lele___

最新推荐文章于 2023-03-08 10:53:15 发布

阅读量636

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/Lele___/article/details/114823396

版权

项目中的用法

ReactDOM.render(
    <div>
        <h1>这是标题</h1>
            今天你吃了吗？？？
        <div className="gren" style={
   {
    color: 'green' }}>
            我应该吃了<br />
            还是没吃
        </div>
    </div>,
    document.getElementById('root')
);

1.通过 babel-preset 将JSX语法糖转义后：

React.createElement("div", {
   
  className: "myBox",
  style: {
   
    color: 'red',
    "font-size": '14px'
  }
}, /*#__PURE__*/React.createElement("h1", null, "\u8FD9\u662F\u6807\u9898"), "\u4ECA\u5929\u4F60\u5403\u4E86\u5417\uFF1F\uFF1F\uFF1F", /*#__PURE__*/React