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添加样式的四种方法的更多相关文章

  1. delphi TreeView 从数据库添加节点的四种方法

    方法一:delphi中递归算法构建treeView 过程:通过读取数据库中table1的数据,来构建一颗树.table1有两个字段:ID,preID,即当前结点标志和父结点标志.所以整个树的表示为父母 ...

  2. HTML引入CSS样式的四种方法

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式          行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐 ...

  3. 引：Jmeter添加变量的四种方法

    一.在样本中添加同请求一起发送的参数.根据服务器设置的数据类型,来添加不同类型的参数 二.用户定义的变量 1.创建:添加->配置元件->用户定义的变量 2.作用:当前的线程组内所有Samp ...

  4. Jmeter添加变量的四种方法

    一.在样本中添加同请求一起发送的参数.根据服务器设置的数据类型,来添加不同类型的参数 二.用户定义的变量 1.创建:添加->配置元件->用户定义的变量 2.作用:当前的线程组内所有Samp ...

  5. vue 添加样式分几种方法

    一. <body> <div id="app"> <div v-bind:class="{ active: isActive }" ...

  6. css添加样式的四种方式

    1. 导入样式:在 .css文件中使用@import url("...")来引入另一个css样式表 2. 外部样式:在html页面中的head中使用 link 标签引入,如< ...

  7. 【AS3】Flash与后台数据交换四种方法整理

    随着Flash Player 9的普及,AS3编程也越来越多了,所以这次重新整理AS3下几种与后台数据交换方法.1.URLLoader(URLStream)2.FlashRemoting3.XMLSo ...

  8. css--使用的四种方法

    前戏 之前学习了HTML相关的知识,也能简单的写一个hello world的页面.但是,只学HTML满足不了我们的需求,而HTML.CSS.JavaScript三者搭配使用才能更好的完成我们需要的效果 ...

  9. [Web 前端] 018 css 清除浮动的四种方法

    清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...

随机推荐

  1. FreeSWITCH 增删模组

    今天在尝试FreeSWITCH新功能时,遇到一个问题,就是该功能所需要的模组没有加载,导致写了好久的代码不能看到效果,让人很是忧伤啊! 再此,将FS模组增删的方法记录下,以方便遇到同样问题的童鞋. 具 ...

  2. cache、session、cookie的区别

    session把数据保存在服务器端,每一个用户都有属于自己的Session,与别人的不冲突就是说,你登陆系统后,你的信息(如账号.密码等)就会被保存在服务器上一个单独的session中,当你退出系统后 ...

  3. spring3.0+Atomikos 构建jta的分布式事务

    摘自: http://gongjiayun.iteye.com/blog/1570111 spring3.0+Atomikos 构建jta的分布式事务 spring3.0已经不再支持jtom了,不过我 ...

  4. 死磕安卓前序：MVP架构探究之旅—基础篇

    前言 了解相关更多技术,可参考<我就死磕安卓了,怎么了?>,接下来谈一谈我们来学习一下MVP的基本认识. 大家对MVC的架构模式再熟悉不过.今天我们就学习一下MVP架构模式. MVC和MV ...

  5. Oracle 数据库导入与出

    Oracle 数据库导入与出 导出( EXPORT )是用 EXP 将数据库部分或全对象的结构和导出 . 导入( 导入( IMPORT )是用 )是用 IMP IMP将 OS 文件中的对象结构和数据装 ...

  6. Confluence 6 属性的一个活动

    为了启用属性,使用上面描述的方法.针对所有的用户,属性每一个访问的页面,将会在你的应用服务器中进行记录,直到你对 Confluence 进行重启.请注意每次用户访问一个链接,一个单一的属性将会被打印出 ...

  7. ps和AI使用过程中的易错点整理

    ps:1.视图工具:1)标尺2)参考线3)网格:视图-->--显示>-->网格4)修改网格:编辑-->首选项>-->参考线.网格和切片 5)放大工具:画布中单击可放 ...

  8. python操作注册表

    #注册表操作 # -*- coding: utf-8 -*- import win32api import win32con #打开注册表:传主键化值,子键值,操作方法(win32con.KEY_AL ...

  9. mysql+redis+memcached

    mysql+redis+memcached 数据库 数据库设计 a. 单表 b. FK(单表:一张表存储时,如果有重复出现的字段为了防止硬盘的浪费,所以做一个FK:去掉FK变成单表(这样子访问速度快了 ...

  10. windows下bat批处理执行sql语句__Mysql

    直接上代码: @ECHO OFF SET dbhost=主机名(例如:127.0.0.1)SET dbuser=用户名(例如:root)SET dbpasswd=用户密码(例如:root)SET db ...