文档章节

reactJS -- 11 內联样式

奋斗的小芋头
 奋斗的小芋头
发布于 2017/07/04 14:06
字数 387
阅读 3
收藏 0

一 . 支持JS 编写CSS

给Header.jsHeader.js增加样式

驼峰命名法

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

注意:const 定义要放在 render 里面return 函数之前,否则会报错。

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  改变。

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

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

3. state 与 css  融合,引起样式及时变化

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>
    )
  }
}

 

© 著作权归作者所有

奋斗的小芋头
粉丝 1
博文 161
码字总数 129345
作品 0
大连
私信 提问
【译】ReactJS 与 Vue.JS - 2019年两个流行 JavaScript 框架的分析

原文 aglowiditsolutions.com/blog/reactj… 关于 ReactJS vs AngularJS 的争论可能已经成为过去。而现在 web 开发者讨论最多的是 Vue.js 和 ReactJS。 前端技术更新速度快,偶尔会出现新的惊...

alentan
06/28
0
0
Facebook 被集体“声讨”,要求更改 ReactJS 许可

Apache 软件基金会上周发布通知,反对使用 Facebook 的 BSD+专利 [ROCKSDB] 许可的流行软件。之后 Facebook 将其开源的 RocksDB 的许可更改为 Apache 2 加 GPL 2 的双重许可,而对于 ReactJ...

达尔文
2017/07/25
4.7K
16
React 快速上手 - 07 前端路由 react-router

React 快速上手 - 07 前端路由 react-router 目标 基础使用 参数传递 路由匹配 转换动画 跳转路由 环境 react 16 react-router 4 react-router-dom 4 react-transition-group 0. 安装 通过官...

会煮咖啡的猫
2018/05/24
0
0
react-router 进阶:认证流程、动画

https://github.com/reactjs/react-router/tree/master/examples https://github.com/reactjs/react-router/issues/1209 https://github.com/reactjs/react-router/blob/master/upgrade-guid......

K68
2016/08/10
0
0
选择 Reac​​tJS 的五大理由

ReactJS是一个开源的JavaScript库,并且由Facebook和Instagram这样的顶尖IT企业以及开发者社区所维护。该框架广泛使用于为web应用程序开发用户界面的时候。这个特殊的框架被发明时带有这样一...

达尔文
2016/09/12
4.1K
32

没有更多内容

加载失败,请刷新页面

加载更多

linux日志切割工具 logrotate

Linux系统默认安装logrotate,默认的配置文件: /etc/logrotate.conf /etc/logrotate.d/ logrotate.conf:为主配置文件 logrotate.d:为配置相关子系统,用于隔离每个应用配置(Nginx、PHP、...

llzzzz
12分钟前
0
0
不得不收藏的大数据Hadoop教程:Hadoop集群搭建

搭建环境安装时间同步Yum install -y ntpdate 网络时间同步命了 服务器地址是阿里云ntpdate ntp1.aliyun.com 手动时间同步方式date -s "20190622 12:32:00" #yyyymmdd hh:mm:ss完全分布式服务...

好程序员IT
15分钟前
0
0
xhprof php性能分析工具

php7 没有官方版 下载地址git clone https://github.com/longxinH/xhprof cd xhprof/extension/ 进入目录指定phpconfig地址进行安装 extension=xhprof.so xhprof.output_dir=/tmp 安装包中x......

曲文
16分钟前
0
0
CentOS7安装GitLab的过程详解

安装Gitlab Step 1.安准基础依赖 $ yum install -y curl policycoreutils-python openssh-server Step 2.安装Postfix 说明:Postfix是一个邮件服务器,GitLab发送邮件需要用到 $ yum ins...

Linux_Anna
16分钟前
0
0
Centos 用docker安装Confluence

1. 下载官方镜像 docker pull atlassian/confluence-server:6.15.7-alpine 2. 创建并运行容器 docker run -m 1024M --memory-swap -1 -host --net=host --name wiki -d -p 8090:8090 -p 800......

熊小熊会写代码哦
29分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部