4jsx语法规则-react

最新推荐文章于 2024-10-11 17:39:47 发布

前端小云儿

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量196

点赞数 3

分类专栏： react 文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/jieweiwujie/article/details/142854741

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>4jsx语法规则</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="test">
    </div>
    <script type="text/babel">
    const myid = 'jsxId'
    const Vdom =(
      <div>
        <h1 id={myid+1} className='title' style={{color:'red'}}>Hello,React</h1>
        <h1 id={myid+2} className='title' style={{color:'blue'}}>Hello,React</h1>
      </div>)
    
    ReactDOM.render(Vdom,document.getElementById('test'))
    /**
     * 1定义虚拟dom不使用引号
     * 2标签种混入表达式使用{}：比如id={myid}。
     * 3样式类名使用className
     * 4 内联样式是{{keyName："value"}}，里面的对象【键】小驼峰【值】要使用''
     * 5 只能有一个根标签;
     * 6 标签只能是双闭合标签，不能是单标签
     * 7 标签首字母小写，则转换为html中同名标签；如果没有，报错
     * 8 标签首字母大写，react去渲染组件，如果没有，报错
     * 
    */
    </script>
  </body>
</html>