jsx语法规则

124次阅读
没有评论

共计 957 个字符,预计需要花费 3 分钟才能阅读完成。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jsx 语法规则 </title>
    <style>
      .title {
        background-color: orange;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <!-- 准备好一个“容器”-->
    <div id="test"></div>

    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="react.development.js"></script>
    <!-- 引入 react-dom,用于支持 react 操作 DOM -->
    <script type="text/javascript" src="react-dom.development.js"></script>
    <!-- 引入 babel,用于将 jsx 转为 js -->
    <script type="text/javascript" src="babel.min.js"></script>

    <script type="text/babel">
      const myId = "myId"
      const myData = "123"

      // 1. 创建虚拟 DOM
      const VDOM = (
        <div>
          <h2 className="title" id={myId.toLowerCase()}>
            <span style={{color: "white", fontSize: "29px"}}>{myData}</span>
          </h2>
          <input type="text" />
        </div>
      )

      // 2. 渲染虚拟 DOM 到页面
      ReactDOM.render(VDOM, document.getElementById("test"))
    </script>
  </body>
</html>

jsx 语法规则

  1. 定义虚拟 DOM 时,不要写引号
  2. 标签中混入 JS 表达式时要用{}
  3. 样式的类名指定不要用 class,要用 className
  4. 内联样式,要用 style={{key:value}} 的形式去写
  5. 只有一个根标签
  6. 标签必须闭合
  7. 标签首字母:若小写字母开头,则将该标签转为 html 中同名元素,若 html 中无该标签对应的同名元素,则报错。若大写字母开头,react 就去渲染对应的组件,若组件没有定义,则报错

正文完
post-qrcode
 0
三毛
版权声明:本站原创文章,由 三毛 于2023-07-30发表,共计957字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)