Rex中的class

最新推荐文章于 2024-07-24 23:30:03 发布

亦是少年

最新推荐文章于 2024-07-24 23:30:03 发布

阅读量69

点赞数 1

文章标签： html5 前端 javascript

本文链接：https://blog.csdn.net/weixin_45757442/article/details/104547892

版权

class

JSX 元素不能直接使用 class 属性
因为 class 在 js 语言内是一个关键字
如果要使用 class 属性，需要书写成 className

书写 class 样式不使用 { } 解析

在标签属性内添加 className=“bg” 属性，bg 是 class 名

<head>
    <style>
        .bg {
            background: red;
        }
    </style>
</head>
<body>

<div id="root"></div>

<script type="text/babel">
    // class---->className
    const bg = "bg";
    ReactDOM.render((
        <div className="bg">设置 css 样式</div>
    ), document.querySelector("#root"));
</script>

书写 class 样式使用差值表达式 { } 解析

在标签属性内添加 className="{bg}" 属性，bg 是 class 名

<head>
    <style>
        .bg {
            background: red;
        }
    </style>
</head>
<body>

<div id="root"></div>

<script type="text/babel">
    // class---->className
    const bg = "bg";
    ReactDOM.render((
        <div className={bg}>设置 css 样式</div>
    ), document.querySelector("#root"));
</script>

style

书写 style 时，需要使用差值表达式 {{}} 例如：style={{}}
因为第 1 个花括号会作为 jsx 语法解析，第 2 个为对象

<div id="root"></div>

<script type="text/babel">
    ReactDOM.render(<div style={{
        width: "200px",
        height: "200px",
        background: "green"
    }}>设置 style 样式</div>, document.querySelector("#root"));
</script>
</body>

亦是少年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Rex中的class

classJSX 元素不能直接使用 class 属性因为 class 在 js 语言内是一个关键字如果要使用 class 属性，需要书写成 className书写 class 样式不使用 { } 解析在标签属性内添加 className=“bg” 属性，bg 是 class 名<head> <style> .bg { ...
复制链接

扫一扫