react 的 jsx 语法规则

最新推荐文章于 2022-06-28 11:21:27 发布

我们都是柠檬精诶

最新推荐文章于 2022-06-28 11:21:27 发布

阅读量212

点赞数

分类专栏： React 文章标签：前端 react jsx

本文链接：https://blog.csdn.net/qq_43392573/article/details/117261429

版权

React 专栏收录该内容

25 篇文章 5 订阅

订阅专栏

标题jsx 语法规则

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jsx语法规则</title>
    <style>
        .title {
            background-color: rgba(207, 19, 91, 0.589);
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        const myId = "TeSt2"
        const myData = "HeLlo World"
        const VDOM = (
        /* class="title" 报错：react-dom.development.js:500 Warning: Invalid DOM property `class`. Did you mean `className`?  in h2*/
        /* style="background-color:red" 报错：
        Uncaught Invariant Violation: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
    in ...
        */
            // <h2 class="title" id={myId.toLowerCase()}>
            <div>
                <h2 className="title" id={myId.toLowerCase()}>
                    <span style={{ color: "white", fontSize: '30px' }}>{myData.toLocaleLowerCase()}</span>
                </h2 >
                <h2 className="title" id={myId.toUpperCase()}>
                    <span style={{ color: "white", fontSize: '30px' }}>{myData.toLocaleLowerCase()}</span>
                </h2 >
                <input type="text" />
                <good>123</good>
                <Good>123</Good>

            </div>
        )
        /* const VDOM = (
            <h2 id="test2">
                    <span>Hello World</span>
                </h2>
        ) */
        ReactDOM.render(VDOM, document.getElementById('test'))

        /*
            jsx 语法规则：
                1、定义虚拟 DOM 时，不要写引号；
                2、标签中混入 js 表达式时要用 {};
                3、样式的类名不能用“class”，要用“className”;
                4、内联样式要用 style={{key:value}} 的形式去写,如，style={{ color: "white", fontSize: '30px' }}
                5、只能有一个跟标签;
                6、标签必须闭合;
                7、标签首字母
                    (1)若小写字母开头，会将该标签转为 HTML 中同名元素，若html中无该标签对应的同名元素，则报错；
                    (2)若大写字母开头，react就会渲染对应的组件，若组件没有定义，则会报错（Good is not defined）
        */
    </script>
</body>

</html>

1、定义虚拟 DOM 时，不要写引号；
2、标签中混入 js 表达式时要用 {};
3、样式的类名不能用“class”，要用“className”;
4、内联样式要用 style={{key:value}} 的形式去写,如，style={{ color: “white”, fontSize: ‘30px’ }}
5、只能有一个跟标签;
6、标签必须闭合;
7、标签首字母
(1)若小写字母开头，会将该标签转为 HTML 中同名元素，若html中无该标签对应的同名元素，则报错；
(2)若大写字母开头，react就会渲染对应的组件，若组件没有定义，则会报错（Good is not defined）

我们都是柠檬精诶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react 的 jsx 语法规则

标题jsx 语法规则<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: rgba(207, 19, 91, 0.589); width: 200p
复制链接

扫一扫