第四节

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/