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：判断是否是移动端
通过User-Agent判断 代码: if(navigator.userAgent.match(/mobile/i)) { //业务层代码 $('body').removeClass("si ...
- MybatisGenerator生成的mapper 少了识别主键的方法 byPrimaryKey()
生成的文件缺少红线标注的类似方法 添加 <property name="useInformationSchema" value="true"/>即可 ...
- HBase的replication原理及部署
一.hbase replication原理 hbase 的复制方式是 master-push 方式,即主集群推的方式,主要是因为每个rs都有自己的WAL. 一个master集群可以复制给多个从集群,复 ...
- django.db.utils.OperationalError: (1045, "Access denied for user 'ODBC'@'localhost' (using password)
错误描述: 从SQLLITE数据库换为MYSQL数据库,执行 python manage.py migrate 命令时,报错:django.db.utils.OperationalError: (10 ...
- JS将图片转换成Base64码
直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 字符串匹配的Boyer-Moore(BM)算法
各种文本编辑器的"查找"功能(Ctrl+F),大多采用Boyer-Moore算法. Boyer-Moore算法不仅效率高,而且构思巧妙,容易理解.1977年,德克萨斯大学的Robe ...
- Synchronizing timer
http://blog.csdn.net/zjq001x/article/details/53107159 集合点: 简单来理解一下,虽然我们的“性能测试”理解为“多用户并发测试”,但真正的并发是不存 ...
- web页面乱码，JSP页面编码设置
解决Web页面访问出现乱码bug,JSP页面首行添加: <%@ page language="java" contentType="text/html; chars ...
- easyui datagrid 隔行变色
easyui datagrid 隔行变色 一:实现样图 二:实现代码 $('#dataGrid').datagrid({ rowStyler:function(index,row){ if (row ...
- Confluence 6 查看内容索引概要
内容索引,通常也被称为查找索引,这个索引被用来在 Confluence 中支持查找.这个索引同时也被其他的一些功能使用,例如在归档邮件中构建邮件主题,View Space Activity 的特性和将 ...