时间戳

首页 > 技术文章 > react样式

react样式

z-study 2022-03-12 19:19 原文

本文主要写一下react的样式写法

react中的{ }语法支持表达式、三目/元，不支持语句如if、for、while

前期准备：在html中引入react的链接：见(https://www.cnblogs.com/z-study/p/15995837.html) 

css样式

<style>
        .bgR{
            background-color: red;
        }
        .bd{
            border-radius: 10px;
            border: 2px solid #eee;
        }
        .textY{
            color: yellowgreen;
        }
    </style>
<body>

代码：

1.基础样式绑定

<div id="app">   </div>
  
    <script type="text/babel">

        let isActive=true
        let bgO="orange"
        let element=(
            <div>
                <h1>样式绑定</h1>    
                <div class="bgR">复习 html 绑定 class</div>
                {    //这是注释的方法
                     //写class时效果会出来，但会报错“Invalid DOM property `class`. Did you mean `className`?”
                     //意思:无效的DOM属性' class '。你指的是“className”吗? 
                     //原因： 因为 jsx 是html和js混写了，class有歧义，让用className
                    }
                <div className="bgR bd">react中html样式绑定</div>
                <hr/>
                <div className={"bgR"}>react样式绑定-直接单括号绑定</div>
            </div>
        )
    ReactDOM.render(element,app)
    </script>
</body>

效果：

接下来代码还是写到element的div里面

2.多个样式绑定

<div className={"bgR","bd"}>react 错误演示 后面的会覆盖掉前面的</div>
    <hr/>
    <div className={["bgR"]}>react 数组的写法</div>
    <hr/>
    <div className={["bgR" , "bd"]}>数组的错误写法</div>
    {
        //这会生成一个新的class:"bgR , bd",我们要思考怎样去掉这个","变成空格
        // arr.join(字符) 已指定的字符链接 分割后的数组元素
    }
                
    <div className={["bgR" , "bd"].join(" ")}>数组的正确使用</div>

结果：

3.运算符绑定

先在js里面声明两个变量

let isActive=true

let bgO="orange"//颜色

<div className={ isActive ? "bgR":"bd" }>三目运算符</div>
     {
         //三目运算符：先判断？前是true或false，true执行":"前的，false执行":"后的
         //短路写法，前面对了才会执行后面的
     }
<div className={ isActive && "bgR" }>短路写法</div>

 4.style绑定样式

  <h1 style={{color:"red"}}>style 绑定</h1>
    {
        // style绑定样式 外层{} 表示jsx 识别里面的代码为js
        // style里面那层{}代表一个对象

    }
  <div style={ {color:bgO} }>style 绑定</div>

欢迎多多交流。

推荐阅读