终极目标：掌握和使用react

本博客目的：记录react学习的进度和心得（react样式和注释）

内容：通过视频学习，掌握react基础语法。

前端框架react自学之react样式和注释(四)

JSX_style

1、Class，style中，不可以存在多个class属性

1
<div class=’abc’  class={‘active’}> 错误的表示

注：JSX对象里面样式不能写成字符串，必须是对象。例如不能是style=”height=100;”，而是写成对象引用的形式style={}，然后之前在外面定义好exampleStyle对象。

2、style样式中，如果存在多个单词的属性组合，第二个单词开始，首字母大写(驼峰式写法)。或者用引号引起来，否则会报错。

1
2
3
4
5
6
let exampleStyle = {
    background:"skyblue",
    borderBottom:"4px solid red",
    'background-image':"url(https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png)"
}

3、多个类共存的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
let element2 = (
    <div>
        <h1 className={"abc "+classStr}>helloworld</h1>
    </div>
)
let classStr2 = ['abc2','redBg2'].join(" ")//相当于将数用空格链接起来，如果没有使用join，在下面的插入该数值是默认以逗号相隔，这样定义的两个类不能正常使用了
let element3 = (
    <div>
        {/* 这里写注释 */}
        <h1 className={classStr2} style={exampleStyle}>helloworld</h1>
    </div>
)

注意：多个class的使用className={‘class1’+classStr}，其中classStr是变量

4、注释

必须在括号的表达式内书写，否则报错：{/* 这里写注释 */}

1
2
3
4
5
6
7
8
let classStr2 = ['abc2','redBg2'].join(" ")
let element3 = (
    <div>
        {/* 这里写注释 */}
        <h1 className={classStr2} style={exampleStyle}>helloworld</h1>
    </div>
)

体会：JSX的使用核心比较简单，导致我们如果要实现一些复杂功能，需要对JS的掌握程度很高。（使用react相对于使用vue来说）