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 ...
随机推荐
- springcloud-1: 用官方的pom.xml配置添加依赖失败
在eclipse中用STS生成了一个springcloud应用,pom.xml的核心配置如下: <parent> <groupId>org.springframework.bo ...
- pointer & iterator
pointer: address, use operator(*) to get/set the value 1) support operator(+,-), move to next posito ...
- 5)协程二(yeild from)
一:yield from说明 python从3.3版本开始使用yield from 替代yield yield from 结构会在内部自动捕获 StopIteration 异常. 这种处理方式与 ...
- Confluence 6 识别系统属性
Confluence 支持一些可以从 Java 系统属性中配置的配置参数和调试(debugging )设置.系统属性通常是使用 -D 为参数选项,这个选项是 Confluence 在运行后设置到 JV ...
- nodejs之koa-router与koa-body搭配使用
简介 koa需要搭配中间件来做接口更方便,使用Koa-body & Koa-router 使用 koa2 创建接口,处理post请求 const koa=require("koa&q ...
- css之操作属性
1.文本 1.文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 ...
- 高斯消元模板！！！bzoj1013
/* 高斯消元模板题 n维球体确定圆心必须要用到n+1个点 设圆心坐标(x1,x2,x3,x4...xn),半径为C 设第i个点坐标为(ai1,ai2,ai3,,,ain)那么对应的方程为 (x1-a ...
- MySQL慢查询 - 开启慢查询
一.简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. 二.参数说明 slow_query_log 慢查询开启状态 slow_ ...
- 步步为营-93-MVC+EF简单实例
1:创建MVC项目 2:添加EF数据(这里选择DataBaseFirst模式) 3:添加控制器 3.1.1 创建列表页面 3.1.2 html页面 @using MvcApplication1 @{ ...
- ubuntu下使用matplotlib绘图无法显示中文label
原因是字体导致的.大家的做法基本都是搞一个windows上的字体文件(simhei.ttf, 点我fq下载)然后刷新一下缓存文件. 只不过百度搜到第一篇CSDN的博客,写的很不靠谱(不是所有的CSDN ...