react笔记之JSX的注意事项-阿里云开发者社区

react笔记之JSX的注意事项

2023-02-09 98

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： react笔记之JSX的注意事项

<!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的注意事项

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

react笔记之JSX的注意事项

热门文章

最新文章

相关课程

相关电子书

相关实验场景