React 进阶之路 三 ( 样式 )

今天来聊一聊样式 style 和 class 的书写

# style 绑定

style 支持 对象 形式，举个栗子：

let tmpStyle= {
  padding: '50px', 
  color:'red',
  borderBottom: '1px solid #ddd' // 有横线链接的需要改成驼峰命名法
  'border-left': '1px solid #ddd' // 或者用引号包起来
}

ReactDOM.render(
    <div style={tmpStyle}>
        hello word
    </div>,
    document.getElementById('root')
);

如果直接书写行内样式

ReactDOM.render(
    <div style={{color:'red', borderBottom: '1px solid #ddd', 'border-left': '1px solid #ddd'}}>
        hello word
    </div>
    document.getElementById('root')
);

注意：样式绑定需要一个对象，即单花括号内接收一个对象，形如双花括号 {{ }}

不支持多次调用，如多次调用 style 则以最后一个为准

let tmpStyle= {
  borderBottom: '1px solid #ddd' 
}
ReactDOM.render(
    <div style={tmpStyle} style={{color:'red'}}>
        hello word
    </div>,
    document.getElementById('root')
);

最后渲染的结果是 color ，而 tmpStyle 中 borderBottom 没有被渲染出来，也不会报错
即前面的 style 定义会被后面的 style 定义覆盖掉，只保留最后一个

# class 绑定

let bgColor = 'bgRed'; 
// 提示：因为 class 是 js 关键词，所以一般把 class 改写为 className
ReactDOM.render(
   <React.StrictMode>
    <div className={bgColor}>
      hello word
    </div>
  <React.StrictMode>,
  document.getElementById('root')
);

同 style 也不支持多次调用，但如果之前已经有样式了，该怎办呢？
其实也好办，因为单花括号 { } 里支持表达式，所以可以用字符串拼接的方式

let bgColor = 'bgRed'; 
ReactDOM.render(
   <React.StrictMode>
    <div className={bgColor + '这里写原有的样式类'}>
      hello word
    </div>
  <React.StrictMode>,
  document.getElementById('root')
);

综上：绑定属性时，不管是 字符串 还是 对象，都是用单花括号 { } 绑定