react添加样式的四种方法
React给添加元素增加样式
第一种方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
<script src="lib/style.js"></script>
<style>
.lala{
color:red;
font-size: 40px;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello=React.createClass({
render:function(){
return (
<div className="lala"> 我出来了!
</div>
)
}
})
ReactDOM.render(
<Hello/>,
document.getElementById('example')
);
</script>
</body>
</html>
第二种方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
<script src="lib/style.js"></script> </head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello=React.createClass({
render:function(){
var style={color:"red","font-size":"40px"}
return (
<div style={style}> 我出来了!
</div>
)
}
})
ReactDOM.render(
<Hello/>,
document.getElementById('example')
);
</script>
</body>
</html>
第三种方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
<script src="lib/style.js"></script> </head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello=React.createClass({
render:function(){
return (
<div style={this.css.style3} > 我出来了!
</div>
)
}
})
Hello.prototype.css={
style3:{color:"green",fontSize:"50px",background:"#ccc"}
}
ReactDOM.render(
<Hello/>,
document.getElementById('example')
);
</script>
</body>
</html>
第四种方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
<script src="lib/style.js"></script> </head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello=React.createClass({
render:function(){
return (
<div style={style.str1} > 我出来了!
</div>
)
}
})
ReactDOM.render(
<Hello/>,
document.getElementById('example')
);
</script>
</body>
</html>
style.js的代码:
var style={
str1:{"font-size":"40px",color:"green",width:"200px",height:"300px","text-align":"center",border:"1px solid gray"}
}
react添加样式的四种方法的更多相关文章
- delphi TreeView 从数据库添加节点的四种方法
方法一:delphi中递归算法构建treeView 过程:通过读取数据库中table1的数据,来构建一颗树.table1有两个字段:ID,preID,即当前结点标志和父结点标志.所以整个树的表示为父母 ...
- HTML引入CSS样式的四种方法
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐 ...
- 引：Jmeter添加变量的四种方法
一.在样本中添加同请求一起发送的参数.根据服务器设置的数据类型,来添加不同类型的参数 二.用户定义的变量 1.创建:添加->配置元件->用户定义的变量 2.作用:当前的线程组内所有Samp ...
- Jmeter添加变量的四种方法
一.在样本中添加同请求一起发送的参数.根据服务器设置的数据类型,来添加不同类型的参数 二.用户定义的变量 1.创建:添加->配置元件->用户定义的变量 2.作用:当前的线程组内所有Samp ...
- vue 添加样式分几种方法
一. <body> <div id="app"> <div v-bind:class="{ active: isActive }" ...
- css添加样式的四种方式
1. 导入样式:在 .css文件中使用@import url("...")来引入另一个css样式表 2. 外部样式:在html页面中的head中使用 link 标签引入,如< ...
- 【AS3】Flash与后台数据交换四种方法整理
随着Flash Player 9的普及,AS3编程也越来越多了,所以这次重新整理AS3下几种与后台数据交换方法.1.URLLoader(URLStream)2.FlashRemoting3.XMLSo ...
- css--使用的四种方法
前戏 之前学习了HTML相关的知识,也能简单的写一个hello world的页面.但是,只学HTML满足不了我们的需求,而HTML.CSS.JavaScript三者搭配使用才能更好的完成我们需要的效果 ...
- [Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
随机推荐
- 使用js下载文件
使用Echarts地图时,需要一些地图数据,到Echarts下载地图数据文件时,发现其下载是直接通过js下载,从其网站上扒下来的记录于此 FileSave.min.js网络地址:http://ecom ...
- Android Studio下载
最新版本的Android Studio 2.1 RC下载地址: Windows: https://dl.google.com/dl/android/studio/ide-zips/2.1.0.8/an ...
- centos7编译安装lnmp
1.前言 本文适合于已经对Linux操作系统具有基本操作经验,并且能够在Linux或Windows上通过一键搭建工具或者yum命令行进行环境搭建的读者,阅读本文需具有一定的专业知识,本文不建议初学者阅 ...
- mysql运维
反反复复装了好多次的mysql,上学的时候从来没有考虑过稳定性,装起来,能跑通,增删改查没有问题万事大吉.参与工作后参与平台搭建和维护,平台的稳定性是首先必须要考虑的问题,之前装mysql使用经历了密 ...
- ACM-ICPC 2018 焦作赛区网络预赛 G Give Candies
There are NNN children in kindergarten. Miss Li bought them NNN candies. To make the process more in ...
- liunx contos 7.4 安装redis集群
前前后后安装了几次redis集群,基本上每次安装都会采坑,耗时伤神. 安装redis依赖gcc环境,安装前先检查liunx上面有没有安装GCC 命令:gcc -v 上传redis-4.0.1.tar. ...
- AFN 请求报 415错误解决方案
使用 AFHTTPSessionManager 发起请求时 设置下面两句代码 manager.requestSerializer = [AFJSONRequestSerializer seriali ...
- CentOS7图形界面与命令行界面切换(转载）
在图形界面使用 ctrl+alt+F2切换到dos界面 dos界面 ctrl+alt+F2切换回图形界面 在命令上 输入 init 3 命令 切换到dos界面 输入 init 5命令 切换到图形界面 ...
- IntersectionObserver API 使用教程
转载:原文地址:http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html 网页开发时,常常需要了解某个元素是否进入了&q ...
- (转)webpack和webpack-simple区别（如何引入css文件）
博主最近研究vue+webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simp ...