reactJS -- 11 內联样式

时间 2019-11-17

标签 reactjs 样式繁體版

原文原文链接

一 . 支持JS 编写CSS

给Header.jsHeader.js增长样式javascript

驼峰命名法css

js 写 css 样式使用原始属性须要双引号括起来。html

注意：const 定义要放在 render 里面return 函数以前，不然会报错。java

import React from 'react';
import ReactDOM from 'react-dom';
//export 暴露
export default class ComponentHeader extends React.Component{

  render(){   //解析类的输出

    const styleComponentHeader = {
      header: {
        backgroundColor: "#333",
        color: "#fff",
        "padding-top": "15px",  //css原生 不推动
        paddingBottom: "15px"
      },
      //定义其余样式
    };

    return (
      <header style = {styleComponentHeader.header}>
        <h1>这里是头部</h1>
      </header>
    )
  }
}

二.引用css文件

1. 建立 style.css文件

.smallFountSize h1{
  font-size: 12px;
}

2.在 index.html 中引用

<head>
  <link rel="stylesheet" href="./src/css/style.css"/>
</head>
<div id="example">123dfdf</div>
<script type="text/javascript" src="/src/bundle.js"></script>

3.在页面中使用类样式

import React from 'react';
import ReactDOM from 'react-dom';
//export 暴露
export default class ComponentHeader extends React.Component{

  render(){   //解析类的输出

    const styleComponentHeader = {
      header: {
        backgroundColor: "#333",
        color: "#fff",
        "padding-top": "15px",  //css原生 不推动
        paddingBottom: "15px"
      },
      //定义其余样式
    };

    return (
      <header style={styleComponentHeader.header} className="smallFountSize"> 
        <h1>这里是头部</h1>
      </header>
    )
  }
}

三. 內联样式用表达式

点击 header 改变。react

1.存储样式，state --> 建立构造函数，存储 true false 值，点击改变，利用值来控制样式dom

2. "padding-top": {this.state.miniHeader}?"3px" : "15px", 函数

3. state 与 css 融合，引发样式及时变化this

import React from 'react';
import ReactDOM from 'react-dom';
//export 暴露
export default class ComponentHeader extends React.Component{
  constructor(){
    super();
    this.state = {
      miniHeader: false,
    }
  }

  switchHeader(){
    this.setState({
      miniHeader: !this.state.miniHeader,
    })
  }
  render(){   //解析类的输出

    const styleComponentHeader = {
      header: {
        backgroundColor: "#333",
        color: "#fff",
        "padding-top": (this.state.miniHeader) ? "3px" : "15px",  //css原生 不推荐
        paddingBottom: (this.state.miniHeader)? "3px" : "15px",
      },
      //定义其余样式
    };

    return (
      <header style={styleComponentHeader.header} className="smallFountSize"
      onClick={this.switchHeader.bind(this)}>
        <h1>这里是头部</h1>
      </header>
    )
  }
}