React样式踩过的“坑”

刚开始写样式真的是各种懵逼，为啥这里要这样写，为什么那里又要那样写，组件间的通信到底是怎么样的，各种不理解，其实写着写着慢慢就能体会到，别人定义好的语法规则为什么这么纠结，就好像在没有学计算机专业之前除了汉语、英语、日语等国家语言之外，哪里知道还有什么C语言，java语言这些针对于计算机的语言呢，我觉得是一个道理~哈哈~

1. 行内style
   如果是在dom元素中写行内样式即”style“的时候，要使用双大括号”{{}}“进行包裹.

2. 类名
   如果你原先很习惯在元素上使用class进行类名的添加的话，那么在react中你需要改一改，在react中class要写成className

3. 样式属性
   关于单个单词的样式属性，比如：width、height、float、display等等，该怎么写还怎么写，但是关于含有连字符即由多个单词组成的样式属性就要换一种写法了，比如：background-color要写成backgroundColor、background-image要写成backgroundImage

4. 样式的属性值
   如果要在行内样式中添加属性时，属性值最好用引号包裹起来，属性和属性之间要用逗号隔开

   <div style={{ display:"inline-block",height:"50px",color:"red"  }}>蹦擦擦</div>
   

5. 动态添加className

   个人建议：在玩react之前先把阮一峰老师的ES6通读了解一下，你会发现在react中使用es6会提高不少效率，比如“解构赋值”，“模板字符串”,“箭头函数”等

   通常在页面中涉及到tab切换的时候，会通过map对数组或者对象遍历，而在react中遍历出的对象要有自己的key值，而且必须要唯一，这里就不赘述这个知识点了。切换tab元素要为选中的tab项添加样式，那就涉及到动态添加类名的问题。

   第一种写法：可以使用es6模板字符串实现（推荐）

   <li key={index} className={`name1 name2 ${index===this.state.currentIndex?"active":null}`}></li>
   

   第二种写法：就如下吧，我反正很少用~~

   <li className={["name1 name2", index===this.state.currentIndex?"active":null].join(' ')}></li>
   

6. 我踩过的background-image坑，总结一下吧

   //导入方式一
   import image1 from '../../1.jpg'
   //导入方式二
   const image2 = require( '../../1.jpg')
   

   <!--（1）可以这样用-->
   <img src={image1} alt="" />
   <img src={image2} alt="" />
   <!--（2）模板字符串形式-->
   <div style={{background:`url(${image1}) no-repeat`}}></div>
   <div style={{background:`url(${image2}) no-repeat`}}></div>
   <!--(3)如果之前没有导入，那就采用拼接的形式呗-->
   <div style={{backgroundImage:'url(' + require('../../1.png') + ')' }}></div>