【react】——jsx语法使用和注意事项

最新推荐文章于 2024-06-04 09:49:49 发布

杨不旧

最新推荐文章于 2024-06-04 09:49:49 发布

阅读量418

点赞数

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

本文链接：https://blog.csdn.net/qq_45152044/article/details/125262654

版权

react 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

什么是jsx，为什么要用jsx

jsx是一个JavaScript的语法扩展。我们建议在react中配合使用jsx，jsx可以很好地描述UI应该呈现出它应有的交互的本质形式。
JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能。

如何使用jsx语法

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
</body>

</html>
<script type="text/babel">
    //在这里可以书写jsx语法，可以看到，同一般script标签不一样的是，需要加上type="text/babel"
    //这代表了babel将这个标签内的高级语法解析成浏览器可以认识解析的语法
</script>

jsx是js的语法糖，为了方便书写虚拟DOM。
之前书写html结构是这样的：

let str = `<h1>hello react</h1>`

而jsx语法书写html结构是这样的：

let oH = <div>
     hello jsx!
</div>;

jsx注意事项

1、script标签上必须使用type=‘text/babel’。后面如果用webpack会有其它的配置方法
2、多个标签必须有一个根标签包裹
3、可以随便缩进，可以给外面加一个括号

let oDiv = (<div>hello react!</div>);

4、单标签必须闭合

 let oDiv = (
            <div>
                <div> hello react!</div>
                <img src="" alt=""></img>
            </div>
        );

或

let oDiv = (
     <div>
         <div> hello react!</div>
         <img src="" alt=""/>
      </div>
);

5、jsx里面如果用到变量，jsx里面可以使用一对{}包括
可以使用：
变量

 let str = ` hello react!`;
 let oDiv = (
              <div>
                 <div>{str}</div>
              </div>
);

函数调用

let fn = () => {
     return '我是一个方法'
}
let oDiv = (
    <div>
        <div>{fn()}</div>
    </div>
);

简单的计算

let a = 1;
let b = 2;
let oDiv = (
    <div>
        <div>{a+b}</div>
    </div>
);

三木运算

let a = 1;
let oDiv = (
    <div>
       <div>{a == 1 ? '你好' : '不好'}</div>
    </div>
);

6、关于属性，如果是变量，必须把引号去掉

let imgsrc = `https://www.w3cschool.cn/attachments/image/20170807/1502094999971188.png`;
let oDiv = (
    <div>
       <img src={imgsrc} alt="" />
    </div>
);

7、class要变成classname,class也能出来但是回报错（和js相关的要用js的写法）
如：data-index改成dataIndex，zIndex

let oDiv = (
       <div>
            <div classname="h1">{a + b}</div>
       </div>
);

8、style还是一个花括号，只是里面要用json对象的形式去写，所以看起来会是两个花括号

let oDiv = (
     <div>
        <div style={{marginRight:20px}}>{fn()}</div>
     </div>
);

9、{}里面能放的数据类型是什么

数据类型	结论（能否正常显示）
number	✔
string	✔
boolean	❌（布尔值转化成了空）
array	❌（会把数组里的每一项一个一个单独写出来）
json	❌（直接报错，不能直接展示，需要用JSON.stringify()）
undefined	❌
NaN	✔
null	✔