致访客
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
第四节
JSX Style样式
- class中不可以存在多个class属性
<div class="abc" class={"active"}>
是错误的表示 - style样式中如果存在多个单词的属性组合,第二个单词开始首字母大写
marginBottom:'100px';
如果首字母不大写,可以用引号引起来'margin-top':'100px';
多个类共存的操作
<h1 className={"abc " + classStr}>helloworld</h1>
或let classStr2 = ['abc', 'redbg'].join(" "); <h1 className={classStr2}>hello world!</h1>
- 注释
必须在大括号表达式内出现,否则报错{/* 注释 */}
本节代码
import React from 'react';
import ReactDOM from 'react-dom';
import './04style.css'
let exampleStyle = {
background: "skyblue",
borderBottom: "1px solid #000"
}
let element = (
<div>
{/* 注释 */}
<h1 style={exampleStyle}>Hello world</h1>
</div>
);
let classStr = "bg-red";
let element2 = (
<div>
<h1 className={"abc " + classStr}>helloworld</h1>
</div>
)
let classStr2 = ['abc', 'redbg'].join(" ");
let element3 = (
<div>
<h1 className={classStr2}>hello world!</h1>
</div>
)
ReactDOM.render(
element3,
document.getElementById("root")
);