React学习day3

最新推荐文章于 2024-04-23 21:38:50 发布

我在东软打代码

最新推荐文章于 2024-04-23 21:38:50 发布

阅读量53

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/weixin_46758732/article/details/116423870

版权

react

React 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

JSX

全称javaScript XML
react 定义的一种类似于XML的JS扩展语法：JS+XML
本质是React。createElement（componentent，props，…children)方法的语法糖
作用：用来简化创建虚拟DOM
. 写法：var ele=<h1>Hello JSXl</h1>
. 注意1：它不是字符串，也不是HTML/XML标签
.注意2：它最终产生的就是一个JS对象
标签名任意：HTML标签或其它标签

XML（拓展）

早期用于存储和传输数据

<student>
   <name>Tom</name>
   <age>19</age>
 </student>

JSX的语法规则

1、定义虚拟DOM时，不要写引号
2、标签中混入JS表达式时要用{}

 const VDOM = (
        <h1 id={myId.toLocaleLowerCase()}>
            <span>{myData.toLocaleLowerCase()}</span>
         </h1>
    )

3、样式的类名指定不要用class，要用className。

<head>
    <meta charset="UTF-8">
    <title>jsx语法规则</title>
    <style>
        .bcolock{
            background-color: #56d32b;
            color: aliceblue;
            width: 150px;
        }
    </style>
</head>

 <h1 className="bcolock" id={myId.toLocaleLowerCase()}>
            <span>{myData.toLocaleLowerCase()}</span>
        </h1>

4、内联样式要用style={{key:value}}的形式去写。

 <h1 className="bcolock" id={myId.toLocaleLowerCase()}>
            <span style={{color:'white'}}>{myData.toLocaleLowerCase()}</span>
        </h1>

如果不用以上的方法，直接安照以往的方式会这样呢？

 <span style='color:white'>{myData.toLocaleLowerCase()}</span>

控制台报错如下：
在这里插入图片描述
5、虚拟DOM只有一个根标签，且标签必须闭合。
6、标签首字母
（1）若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
（2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx语法规则</title>
    <style>
        .bcolock{
            background-color: #56d32b;

            width: 150px;
        }
    </style>

</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<div id="demo"></div>
<!--引入react核心库-->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作DOM-->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    const myId = 'How are you';
    const myData = 'I am fine'
    //创建虚拟DOM
    const VDOM = (

        <div>
            <h1 className="bcolock" id={myId.toLocaleLowerCase()}>
                <span style={{color:'white'}}>{myData.toLocaleLowerCase()}</span>

            </h1>
            <input type="text"></input>
          </div>
    )
    //渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))


</script>

</body>
</html>

运行结果：
在这里插入图片描述

JSX练习：

动态展示列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态展示数据列表</title>
</head>
<body>
<div id="test"></div>
<!--引入react核心库-->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作DOM-->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    //模拟数据
    const data=['aaa','bbb','ccc']
    //创建虚拟DOM
    const VDOM = (
        <div>
            <h1>字母表</h1>
            <ul>
                {
                    data.map((item,index)=>{
                        return  <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
    //渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))

</script>

</body>
</html>

运行结果：
在这里插入图片描述

我在东软打代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习day3

JSX全称javaScript XMLreact 定义的一种类似于XML的JS扩展语法：JS+XML本质是React。createElement（componentent，props，…children)方法的语法糖作用：用来简化创建虚拟DOM. 写法：var ele=<h1>Hello JSXl</h1>. 注意1：它不是字符串，也不是HTML/XML标签.注意2：它最终产生的就是一个JS对象标签名任意：HTML标签或其它标签XML（拓展）
复制链接

扫一扫