03_JSX理解和使用
Posted zhanzhuang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了03_JSX理解和使用相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_JSX</title> </head> <body> <div id="test1"></div> <div id="test2"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/javascript"> const msg = ‘I Like You!‘; const myId = ‘Atguigu‘; // 1. 创建虚拟dom 本质创建 const vDom1 = React.createElement(‘h2‘, {id: myId.toLowerCase()}, msg.toUpperCase()); // debugger // 2. 渲染虚拟dom ReactDOM.render(vDom1, document.getElementById(‘test1‘)); </script> <script type="text/babel"> //1.创建虚拟dom JSX语法创建,运行时会转换成上面的形式 const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>; // debugger /*虚拟dom渲染后会转换成真实的dom，虚拟dom中的h3与真实dom中的h3是一一对应的*/ //2.渲染虚拟dom ReactDOM.render(vDom2, document.getElementById(‘test2‘)); </script> </body> </html>
以上是关于03_JSX理解和使用的主要内容，如果未能解决你的问题，请参考以下文章