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 ...
随机推荐
- iOS -- Effective Objective-C 阅读笔记 (2)
1: 多用类型常量, 少用 #define 预处理指令 #define 预处理指令会把碰到的所有 指定名称 一律换位 定义的内容, 这样的话, 假设此指令在某个头文件中, 那么所有引入这个头文件的代码 ...
- 在多任务（RTOS）环境中使用看门狗
最近在SEGGER的博客上看到一篇有关在实时操作系统使用看门狗的文章.从一个失败的太空项目出发,分析了看门狗的作用及使用,自我感觉很有启发,特此翻译此文并推荐给各位同仁.为了阅读方便,有些航天领域名词 ...
- VBS将本地的Excel数据导入到SQL Server中
VBS将本地的Excel数据导入到SQL Server中 高文龙关注0人评论1170人阅读2017-05-14 12:54:44 VBS将本地的Excel数据导入到SQL Server中 最近有个测试 ...
- Java9 新特性 详解
作者:木九天 < Java9 新特性 详解 > Java9 新特性 详解 摘要: 1.目录结构 2.repl工具 jShell命令 3.模块化 4.多版本兼容jar包 5.接口方 ...
- JS 实现的浏览器系统通知 iNotify.js
注:本分非原创:信息来源 oschina 授权协议:MIT 开发语言:JavaScript 操作系统:跨平台 软件作者:同一种调调 iNotify.js 详细介绍 JS 实现浏览器的 title 闪烁 ...
- Confluence 6 禁用管理员联系表单
如果你希望禁用这个功能,不允许用户通过发送电子邮件的方式联系站点管理员.你可以禁用这个页面中有关输入用户信息发送电子邮件的部分.你只能禁用用户电子邮件输入表单,如果你按照上面描述的步骤在 'Custo ...
- 论文阅读：Review of Visual Saliency Detection with Comprehensive Information
这篇文章目前发表在arxiv,日期:20180309. 这是一篇针对多种综合性信息的视觉显著性检测的综述文章. 注:有些名词直接贴原文,是因为不翻译更容易理解.也不会逐字逐句都翻译,重要的肯定不会错过 ...
- Python中的xxx+=xxx和xxx=xxx+xxx一些区别及执行过程
预知小知识: Python中的变量与其他语言稍有差异,如a = 10并不是直接在内存中创建一个变量a其值为10,而是在内存中创建一个a这个a指向这个10,在Python中所有牵扯到等号的均不是值赋值, ...
- shell 判断文件夹或文件是否存在
文件夹不存在则创建 if [ ! -d "/data/" ];then mkdir /data else echo "文件夹已经存在" fi 文件存在则删除 i ...
- Loadrunner 接口依赖测试
Action() { //利用关联获取第一个GET请求的返回XXX字段的值,并存储到response_XXX变量中. web_reg_save_param_ex( "ParamName=re ...