react学习第二天（二）

jsx_style 样式

let exampleStyle = {
  background: "pink",
  borderBottom: "1px solid blue"   //注意要使用驼峰命名法
}

let element = (
  <div>
    <h1 style={exampleStyle}>helloworld</h1>
    //jsx中不能在style中直接添加样式
    //<h1 style="height: 200px;">helloworld</h1>
  </div>
)

ReactDOM.render(
  element,
  document.querySelector('#root')
)

效果如下：

let color = "bgpink";
let element = (
  <div>
    <h1 className={"abc "+color}>helloworld</h1>
  </div>
)

ReactDOM.render(
  element,
  document.querySelector('#root')
)

效果如下：

浏览器中渲染样式如下：

let color = "bgpink";
let classArr = ["bgpink", "color"].join(" "); 
let element = (
  <div>
    <h1 className={classArr}>helloworld</h1>
  </div>
)

ReactDOM.render(
  element,
  document.querySelector('#root')
)

浏览器渲染如下：

注意jsx中注释的写法：

let element = (
  <div>
    {/**这里写注释 */}
    <h1 className={classArr}>helloworld</h1>
  </div>
)

总结：

• class 或 style 中不可以存在多个class属性
• style 样式中，如果存在多个单词属性组合，使用驼峰命名法，例如borderBottom，或者用引号引起来，例如：‘border-bottom’: “1px solid red”
• 多个类共存的操作，例如className={'abc '+color}
• 注意jsx中的注释写法，必须在大括号的表达式中书写