MENU

React学习笔记【3】

第四节

JSX Style样式

  1. class中不可以存在多个class属性
    <div class="abc" class={"active"}>是错误的表示
  2. style样式中如果存在多个单词的属性组合,第二个单词开始首字母大写
    marginBottom:'100px';
    如果首字母不大写,可以用引号引起来
    'margin-top':'100px';
  3. 多个类共存的操作
    <h1 className={"abc " + classStr}>helloworld</h1>

    let classStr2 = ['abc', 'redbg'].join(" ");
    <h1 className={classStr2}>hello world!</h1>
  4. 注释
    必须在大括号表达式内出现,否则报错
    {/* 注释 */}

本节代码

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

文章标题:React学习笔记【3】
如果文中内容侵犯了您的权益,请及时与博主取得联系进行删除!
本站文章未经许可禁止转载,本文地址:https://blog.wanvale.com/archives/237/

Last Modified: November 17, 2020
Archives QR Code Tip
QR Code for this page
Tipping QR Code