react中JAX语法介绍、使用、使用注意事项

最新推荐文章于 2023-03-02 17:00:26 发布

杨不旧

最新推荐文章于 2023-03-02 17:00:26 发布

阅读量497

点赞数

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

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

版权

react 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

JAX介绍

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

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

JAX语法写DOM：

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

总结： 使用JAX语法写DOM结构，可以随意换行和缩进。

JAX使用注意事项

1、script标签上必须使用type='text/babel’
示例：

<script type="text/babel">

</script>

2、多个标签必须有一个根标签包裹

示例正确写法：

 <script type="text/babel">
    let oDiv = <div>
            	  <p>JAX语法初使用</p>
        	   </div>;
    ReactDOM.render(oDiv, document.querySelector("#app"));
</script>

示例错误写法：

 <script type="text/babel">
    let oDiv = <div><p>JAX语法初使用</p></div>
    		   <div><p>JAX语法初使用</p></div>;
    ReactDOM.render(oDiv, document.querySelector("#app"));
</script>

3、可以随便缩进，可以给外面加一个括号

<script type="text/babel">
    let oDiv = (
        <div>
            <p>JAX语法初使用</p>
        </div>
    );
    ReactDOM.render(oDiv, document.querySelector("#app"));
</script>

4、单标签必须闭合

这类主要指img这类标签
示例写法：

<script type="text/babel">
    let oDiv = (
        <div>
            <p>JAX语法初使用</p>
            <img src="" alt="" />
            <img src="" alt=""></img>
        </div>
    );
    ReactDOM.render(oDiv, document.querySelector("#app"));
</script>

5、jsx里面的{}有哪些用法
a：变量
示例写法：

<script type="text/babel">
    let str = ` hello react!`;
    let oDiv = (
        <div>
        	<p>JAX语法初使用</p>
            <p>{str}</p>
        </div>
    );
    ReactDOM.render(oDiv, document.querySelector("#app"));
</script>

b：函数调用

<script type="text/babel">
    let fn = () => {
        return '我是一个方法'
    }
    let oDiv = (
        <div>
        	<p>JAX语法初使用</p>
            <p>{fn()}</p>
        </div>
    );
    ReactDOM.render(oDiv, document.querySelector("#app"));
</script>

c：简单的计算

<script type="text/babel">
    let a = 1;
    let b = 2;
    let oDiv = (
        <div>
        	<p>JAX语法初使用</p>
            <p>{a + b}</p>
        </div>
    );
    ReactDOM.render(oDiv, document.querySelector("#app"));
</script>

d：三木运算

<script type="text/babel">
    let a = 1;
    let oDiv = (
        <div>
        	<p>JAX语法初使用</p>
            <p>{a == 1 ? '你好' : '不好'}</p>
        </div>
    );
    ReactDOM.render(oDiv, document.querySelector("#app"));
</script>

6、关于属性，如果是变量，必须把引号去掉，否则会当为字符串
示例代码：

<script type="text/babel">
    let imgsrc = `https://www.w3cschool.cn/attachments/image/20170807/1502094999971188.png`;
    let oDiv = (
        <div>
        	<p>JAX语法初使用</p>
            <img src={imgsrc} alt="" />
        </div>
    );
    ReactDOM.render(oDiv, document.querySelector("#app"));
</script>

7、class要变成classname,class也可以出来但是回报错（和js相关的最好用js的写法）如：data-index在js里要写成dataIndex，还要如zIndex。

<!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>
    <style>
        .h1 {
            color: red;
        }
    </style>
</head>

<body>
    <!-- react的容器 -->
    <div id="app"></div>
</body>

</html>
<script type="text/babel">
    let oDiv = (
        <div>
            <p className="h1">JAX语法初使用</p>
        </div>
    );
    ReactDOM.render(oDiv, document.querySelector("#app"));
</script>

8、style本质还是一个花括号，只是花括号装的变量要用json对象的形式去写，所以看起来会是两个花括号。

<script type="text/babel">
    let oDiv = (
        <div>
            <p style={{ "color": "pink" }}>JAX语法初使用</p>
        </div>
    );
    ReactDOM.render(oDiv, document.querySelector("#app"));
</script>

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

数据类型	能够显示出来	说明
number	√	正常显示
string	√	正常显示
boolean	×	显示不出来，布尔转换为空字符串
array	√	不能正常显示，会把数组里的每一项一个一个单独写出来
json	×	直接报错，不能直接展示，需要用JSON.stringify()
undefined	×	显示不出来，undefined转换为空字符串
NaN	√	显示为null
null	√	显示为null

10、添加事件
时间名需要驼峰的写法，写在{}里，不能加引号，加了引号永远都是字符串。事件后面需要函数，不是执行函数后返回的结果，如写法为fn而不是fn()

示例代码在后面看事件对象部分

虚拟DOM有什么好处

只有不同的才会动，其它不变的就不会动，提高性能。

示例代码

<!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>
    <!-- react的容器 -->
    <div id="app"></div>
</body>

</html>
<script type="text/babel">
    let clock = () => {
        //只有p标签在动
        let oH1 =
            <div>
                <h1>现在时间是：</h1>
                <p>{new Date().toLocaleTimeString()}</p>
            </div>
        ReactDOM.render(oH1, document.querySelector('#app'));
        //整个id为app的div在变（需要演示，把上面的代码注释，取消下面代码的注释）
        // let oH = `<div>
        //         <h1>现在时间是：</h1>
        //         <p>${new Date().toLocaleTimeString()}</p>
        //     </div>`;
        // document.querySelector('#app').innerHTML = oH;

    }
    setInterval(clock, 1000);
</script>

JAX在react中实现的原理

<script type="text/babel">
    let str = 'hello word'
    let oH = <h1 className="h1">{str}</h1>;
    ReactDOM.render(oH, document.querySelector("#app"));

</script>

上面的写法等价于下面的写法：

<script type="text/babel">
     //let oH = React.createElement(要创建什么标签,{节点属性(如要给节点加的什么类)},节点内容是什么);
     let oH = React.createElement('h1', { className: "h1" }, 'hello world！');
     ReactDOM.render(oH, document.querySelector("#app"));

</script>

有关更多玩转react知识请查看本专栏

杨不旧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
react中JAX语法介绍、使用、使用注意事项

JAX介绍jsx是js的语法糖，为了方便书写DOM。之前书写DOM结构： let str = `<h1>hello react</h1>`JAX语法写DOM：let oH = <div> hello react!</div>;总结：使用JAX语法写DOM结构，可以随意换行和缩进。JAX使用注意事项1、script标签上必须使用type='text/babel’示例：<script type="
复制链接

扫一扫