react样式
本文主要写一下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>
欢迎多多交流。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？