React jsx规则JSX核心语法一书写规范

最新推荐文章于 2024-11-08 19:00:00 发布

原创最新推荐文章于 2024-11-08 19:00:00 发布 · 777 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

前端知识同时被 3 个专栏收录

46 篇文章

订阅专栏

前端基础知识

35 篇文章

订阅专栏

经验分享

12 篇文章

订阅专栏

JSX是什么

JSX 全称 JavaScript XML，是React 定义的一种类似于 XML 的 JS 扩展语法：JS + XML
 本质是 React.createElement(component, props, ...children) 方法的语法糖。 用于简化创建虚拟 DOM，
 写法：var ele = <h1>Hello JSX!</h1>。
 注意，它不是字符串，也不是 HTML/XML 标签。它最终产生的是一个 JS 对象。

维基百科词条

在这里插入图片描述

JSX是一种JavaScript的语法扩展（eXtension），
也在很多地方称之为JavaScript XML，因为看起就是一段XML语法；

为什么React选择了JSX

React认为渲染逻辑本质上与其他UI逻辑存在内在耦合
比如UI中需要展示数据状态，在某些状态发生改变时，又需要改变UI；
我们只需要知道，JSX其实是嵌入到JavaScript中的一种结构语法

JSX的书写规范

JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div原生（或者使用后面我们学习的Fragment）
为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写；
JSX中的标签可以是单标签，也可以是双标签; 注意：如果是单标签，必须以/>结尾
创建虚拟DOM时，不要写引号；
标签中要混入js表达式，要是用{}
标签中样式的类名要用className指定
标签中的内联样式要用style={{color:‘white’}}，注意属性名转为小驼峰
一定注意区分：【js语句(代码)】与【js表达式】

关于标签首字母
1.若首字母小写，那么React就会去寻找与之同名的html标签
若找见，直接转为html同名元素
若未找见，报错
2. 若首字母大写，那么React就会去寻找与之同名的组件
若找见，那么就是用组件
若未找见，报错

jsx中注释的写法

// 需要大括号包裹双斜杠星星** 
  {/* 我是一段注释 */}

JSX的使用

JSX嵌入变量

情况一：当变量是Number、String、Array类型时，可以直接显示
情况二：当变量是null、undefined、Boolean类型时，内容为空；
如果希望可以显示null、undefined、Boolean，那么需要转成字符串；
转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式；
情况三：对象类型不能作为子元素（not valid as a React child）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="../react/react.development.js"></script>
    <script src="../react/react-dom.development.js"></script>
    <script src="../react/babel.min.js"></script>

    <script type="text/babel">
      class App extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
            // 1.在{}中可以正常显示显示的内容
            name: "why", // String
            age: 18, // Number
            names: ["abc", "cba", "nba"], // Array

            // 2.在{}中不能显示(忽略)
            test1: null, // null
            test2: undefined, // undefined
            test3: true, // Boolean
            flag: true,

            // 3.对象不能作为jsx的子类
            friend: {
              name: "kobe",
              age: 40,
            },
          };
        }

        render() {
          return (
            <div>
              {/* 1.本身就显示的*/}
              <h2>{this.state.name}</h2>
              <h2>{this.state.age}</h2>
              <h2>{this.state.names}</h2>
              {/* 2.本身就不能显示的*/}
              <h2>{this.state.test1}</h2>
              <h2>{this.state.test2}</h2>
              <h2>{this.state.test3}</h2>

              {/* 3.将不能显示的转变成可以显示的*/}
              <h2>{this.state.test1 + ""}</h2>
              <h2>{this.state.test2 + ""}</h2>
              <h2>{this.state.test3.toString()}</h2>

              <h2>{this.state.flag ? "你好啊" : null}</h2>
              {/* 4.对象不能作为jsx的子类--报错*/}
              <h2>{this.state.friend}</h2>
            </div>
          );
        }
      }

      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>

JSX嵌入表达式

运算表达式
三元运算符
执行一个函数

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <div id="app"></div>

   <script src="../react/react.development.js"></script>
   <script src="../react/react-dom.development.js"></script>
   <script src="../react/babel.min.js"></script>

   <script type="text/babel">
     class App extends React.Component {
       constructor(props) {
         super(props);

         this.state = {
           firstname: "kobe",
           lastname: "bryant",
           isLogin: false,
         };
       }

       render() {
         // 对象的解构
         const { firstname, lastname, isLogin } = this.state;

         return (
           <div>
             {/*1.jsx里面可以放入各种表达式，这里只是举例几个 */}
             {/*1.运算符表达式*/}
             <h2>{firstname + " " + lastname}</h2>
             <h2>{20 * 50}</h2>

             {/*2.三元表达式*/}
             <h2>{isLogin ? "欢迎回来~" : "请先登录~"}</h2>

             {/*3.进行函数调用*/}
             <h2>{this.getFullName()}</h2>
           </div>
         );
       }

       getFullName() {
         return this.state.firstname + " " + this.state.lastname;
       }
     }

     ReactDOM.render(<App />, document.getElementById("app"));
   </script>
 </body>
</html>