react笔记之JSX的注意事项-天翼云

react笔记之JSX的注意事项

2024-05-28 09:20:06 阅读次数：24

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JSX的注意</title>
    <script src="script/react.development.js"></script>
    <script src="script/react-dom.development.js"></script>
    <!-- 引入babel -->
    <script src="script/babel.min.js"></script>
</head>
<body>
<div id="root"></div>

<script type="text/babel">
    /*
    *   JSX的注意事项
    *       1. JSX不是字符串，不要加引号
    *       2. JSX中html标签应该小写，React组件应该大写开头
    *       3. JSX中有且只有一个根标签
    *       4. JSX的标签必须正确结束（自结束标签必须写/）
    *       5. 在JSX中可以使用{}嵌入表达式
    *              - 有值的语句的就是表达式
    *       6. 如果表达式是空值、布尔值、undefined，将不会显示
    *       7. 在JSX中，属性可以直接在标签中设置
    *           注意：
    *               class需要使用className代替
    *               style中必须使用对象设置
    *                   style={{background:'red'}}
    *
    * */

    function fn() {
        return 'hello';
    }

    const name = '孙悟空';

    const div = <div
        id="box"

        onClick={() => {
            alert('哈哈')
        }} className="box1"

        style={{backgroundColor: "yellowgreen", border: '10px red solid'}}
    >
        我是一个div
        <ul>
            <li>列表项</li>
        </ul>

        <input type="text"/>

        <div>
            {name} <br/>
            {1 + 1} <br/>
            {fn()} <br/>
            {NaN} <br/>
        </div>
    </div>;

    // alert(div);


    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(div);

</script>
</body>
</html>

活动

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

react笔记之JSX的注意事项

react笔记之JSX的注意事项

相关文章

shell语法总结一变量

python算法面试题

【数据结构与算法】之字符串系列

【算法】算法题-反转字符串

【数据结构与算法】之字符串系列

【数据结构与算法】之字符串系列-罗马数字转整数

【数据结构与算法】之字符串系列-两个列表的最小索引总和

【数据结构与算法】之字符串系列-无重复字符串的排列组合

【数据结构与算法】之字符串系列-字符串中的单词数

【数据结构与算法】之字符串系列-检测大写字母

作者介绍

最新文章

Python学习笔记（进阶）

python知识点总结-match、search、group、groups、findall的区别

Python基础之字符串

快速上手Apache

C语言从入门到精通——指针和字符串

关于 SAP UI5 里包含的 jQuery 版本

热门文章

Python高级变量类型

mysql列存储引擎-字符串属性列-列压缩测试

html+css实战183-购物车

刷题——Python篇（2）类型转换

Python：使用2to3将Python2转Python3

【Python】传值与传址

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

React-传统写法

java中StringTokenizer使用

​​软件开发入门教程网之​​C++ 标准库

前端：侧边固定导航栏jQuery实现定位

HTML的元素、标签和属性

Python高级变量类型

软件开发入门教程网之C++ 标准库