React笔记 #02# jsx语法规则&动态列表初步

  • Z时代
  • 2024-01-10
  • 分类：综合

react

饮水思源：https://www.bilibili.com/video/BV1wy4y1D7JT?p=5

jsx语法规则

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Add React in One Minute</title>
</head>
<body>
  <div id="test"></div>
  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- Load Babel -->
  <!-- v6 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    let 容器 = document.querySelector("#test");
    let 数据 = '数据要用花括号括起来';
    let style不能写字符串 = {
      color: 'pink',
      fontSize: '54px',
    };
    let class要用className因为class是关键字 = 'title';
    let 虚拟DOM = (
      <div className={class要用className因为class是关键字} id={数据} style={style不能写字符串}>{数据}</div>      
    )
    ReactDOM.render(虚拟DOM, 容器);
  </script>
</body>
</html>

运行结果：

<div id="test"><div class="title" id="数据要用花括号括起来" style="color: pink; font-size: 54px;">数据要用花括号括起来</div></div>

动态列表初步

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Add React in One Minute</title>
</head>
<body>
  <div id="test"></div>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- Load Babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    let 容器 = document.querySelector("#test");
    let list = ["data1", "data2", "data3"]
    let 虚拟DOM = (
      <ul>
        <li>data0</li>
        {list.map(x => <li>{x}</li>)}
      </ul>      
    )
    ReactDOM.render(虚拟DOM, 容器);
  </script>
</body>
</html>

控制台不高兴，列表元素必须有唯一的key：

暂时改成这样：

    let 虚拟DOM = (
      <ul>
        <li >data0</li>
        {list.map((x, i) => <li key={i}>{x}</li>)}
      </ul>      
    )

以上是 React笔记 #02# jsx语法规则&动态列表初步 的全部内容， 来源链接： utcz.com/z/383947.html

回到顶部