1.前言
总结下 react中样式绑定
2.JSX语法规则
1.遇到
<>以html形式进行解析2.遇到
{}以js形式进行解析 只能写表达式
3. class绑定
let isActive = true let yg = "yellowGreen" let element = ( <div> <h1 className={"active", "textW"}> 错误写法后面的类名会覆盖前面的</h1> <h1 className={"active textW"} >空格分开多个 class</h1> <h1 className={["active", "textW"]}>转成字符串没有这个类名</h1> <h1 className={["active", "textW"].join(" ")}>指定链接符</h1> <hr /> <h1 className={isActive ? "active": ""}>三目运算符</h1> <h1 className={isActive && "active"}>短路</h1> )
1.由于 JSX 就是 JavaScript, 一些标识符像 class 和 for 不建议作为 XML 属性名。
2.作为替代，React DOM 使用 className 和 htmlFor
来做对应的属性
4. style绑定
{/* 注意 最外层的{}是插值 里面是js 里面的那个{}说明里面那个是style的写法 绑定style obj对象 */} <h1 style={{color:"red"}}> 自强不息</h1> <h1 style={{color:yg}}>厚积薄发</h1>
5.属性绑定
样式绑定这里其实推断出 react 中的 属性绑定形式
1.vue v-bind:属性 :属性=""
2.react 中 属性= {} 插值 就可以直接绑定
<h1 className={"active textW"} title={"标题"}> 属性绑定</h1>
