React学习笔记【3】

致访客
感谢各位一年多的陪伴，因内容调整，本站将于近日迁移到新域名并不再更新主要内容。
特此通知。

第四节

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")
);