在看本篇之前建议先看完 ：

鸡汤·概述篇

JSX篇

　

————致力于最简单的前端教程，每天一篇文章，轻松进阶前端

上篇文章提及 jsx 属性：

const element = <img src='./img/pic.jpg'></img>;

src就是jsx的属性，看起来跟html相同，但是还是有所区别。

jsx属性的规定

对于html而言，属性名是不区分大小写（比如事件的写法 onclick 等同于 onClick），值只能是字符串。

而jsx在属性名和属性值上都有些改变。

• 属性名

必需是驼峰式写法

const d = <div onClick="fn"></div>

• 属性值

（1）值可以是字符串或表达式{}

let url='./img/pic.jpg'
const element = <img src={url}></img>

注：表达式是字符串时等同于字符串

const element = <img src='./img/src.jpg'></img>
//等价于
const element = <img src={'./img/src.jpg'}></img>

（2）值缺省时为true

<div autocomplete />
//等价于
<div autocomplete={true} />

jsx属性分类

jsx在属性上也进行了扩展，除了原有的html属性之外，还加了一些jsx特有的属性。

这样我们把jsx属性分成三类：html属性、jsx属性、自定义属性。

1. html 属性

jsx 属性支持原生html的属性，比如src、name、 id等等，但是有些特例。

（1）className

html的class在jsx里改为className

<div className="class1 class2"></div>

（2）style

style属性值必须是个对象

<div style={{color:'#ccc',border:'1px #000 solid'}}></div>
//或者
const myStyle={
　color:'#ccc',
　border:'1px #000 solid'
}
<div style={myStyle}></div>

2. jsx属性

jsx为了方便，添加了一些额外的属性，这些属性在后面的组件中用到，暂时只做了解，比如：

ref 、key 、 children

3. 自定义组件

类似html中自定义属性。

设置属性的三种方式

• 键值对形式

  如前面所用到的都是这种方式

• 展开符形式(...)

  用于一次性添加所有属性，展开符(...)用于展开所有属性（后续在es6系列文章详述）

let myProps={
　className:'class1 class2',
　id:'cc'
}
const div=<div {...myProps}></div>
//结果相当于
const div=<div className='class1 class2' id='cc'></div>

• setProps

  此方法很少使用，违背react设计原则，了解即可。

本篇文章到此结束，下篇具体说说React组件。

【提醒，关注后就能收到文章更新推送了】

【前方雾大，关注一下不迷路 = 。=】

【html】【css】【html】【css】【html】【javascript】【html】【javascript】【javacsript】【css】【javascript】【css】