React - jsx语法规则

最新推荐文章于 2022-09-23 14:28:09 发布

非著名奶茶爱好者

最新推荐文章于 2022-09-23 14:28:09 发布

阅读量307

点赞数 3

分类专栏： React 文章标签： react js javascript html

本文链接：https://blog.csdn.net/weixin_46398446/article/details/116786678

版权

React 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jsx语法规则

定义虚拟DOM时，不要写引号。
标签中混入JS表达式要用{}.
样式的类名指定不要用class，要用className。
内联样式，要用style={{key：value}}形式写，value注意加引号。
只有一个根标签。
标签必须闭合。
标签首字母
a.若小写字母开头，则将标签转为html同名元素，若html无该标签对应同名元素，则报错。
b.若大写字母开头，react就去渲染对应组件，若组件没有定义，则报错

<!--
    jsx语法规则：
        1.定义虚拟DOM时，不要写引号。
        2.标签中混入JS表达式要用{}.
        3.样式的类名指定不要用class，要用className。
        4.内联样式，要用style={{key：value}}形式写，value注意加引号。font-size要写成驼峰fontSize。
        5.只有一个根标签。
        6.标签必须闭合。
        7.标签首字母
            a.若小写字母开头，则将标签转为html同名元素，若html无该标签对应同名元素，则报错。
            b.若大写字母开头，react就去渲染对应组件，若组件没有定义，则报错
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语法规则</title>
</head>
<style>
    .title {
        background-color: yellow;
        color: red;
    }

    .data {
        background-color: pink;
        color: green;
    }
</style>
<body>
    <!--准备好一个容器-->
    <div id="test"></div>

    <!--引入react核心库-->
    <script src="../js/react.development.js"></script>
    <!--引入react-dom，用于支持react操作dom-->
    <script src="../js/react-dom.development.js"></script>
    <!--引入babel，用于将jsx转为js-->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        const myId = 'aBcDE';
        const myData = 'hello world'
        // 1.创建虚拟DOM
        const VDOM = (
            <div>
                <h2>
                    <span className="title">{myId.toLowerCase()}</span>
                </h2>
                <h3>
                    <span className="data" style={{padding: '8px',fontSize: '20px'}}>{myData.toUpperCase()}</span>
                </h3>
                <input type="text"/>
            </div>
        )
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>