五、jsx语法规则

鞋不压震

已于 2023-03-15 10:52:39 修改

阅读量211

点赞数

分类专栏： React技术总结文章标签： javascript 前端 html

于 2023-02-14 19:12:30 首次发布

本文链接：https://blog.csdn.net/weixin_44054594/article/details/129031065

版权

React技术总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、jsx语法规则
二、jsx小练习
- 在页面中显示列表

提示：以下是本篇文章正文内容，下面案例可供参考

一、jsx语法规则

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

二、jsx小练习

在页面中显示列表

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>jsx小练习</title>
</head>

<body>
  <!-- 准备好一个容器 -->
  <div id="test"></div>

  <!-- 引入react核心库 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script src="./babel.min.js"></script>

  <!-- 此处一定要写babel -->
  <script type="text/babel">
    /*
       一定要注意区分：【js语句（代码）】与【js表达式】
           1、表达式：一个表达式会产生一个值，可以放在任意一个需要值得地方
              下面这些都是表达式：
                 （1）a
                 （2）a+b
                 （3）demo（1）
                 （4）arr.map（）
                 （5）function test（）{}
           2、语句（代码）：
                 （1）if（）{}
                 （2）for（）{}
                 （3）switch（）{case：xxxx}
    */
    // 模拟一些数据
    let arr=['a','b','c']
    // 创建虚拟DOM
    const VDOM = (
      <div>
        <h1>列表</h1>
        <ul>
          {
            arr.map((item,index)=>{
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>
    )
    // 渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))    
  </script>
</body>
</html>