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. how to avoid inheritance abuse

    Liskov Principle: if S is a subtype of Type T, then any objects of type T may be repalced by objects ...

  2. 【原创】大叔经验分享（35）lzo格式支持

    建表语句 CREATE EXTERNAL TABLE `my_lzo_table`(`something` string)ROW FORMAT DELIMITED FIELDS TERMINATED ...

  3. ifconfig和ping

    命令: ifconfig 对应英文: configure a network interface 作用: 查看 / 配置计算机当前的网卡配置信息 安装: sudo apt install net-to ...

  4. 5)django-模板

    django模板显示页面 一:语法使用 1)变量:{{变量名}}         2)for循环            {% for row in userlist%}                 ...

  5. Windows上的程序员神器Cmder

    用过Windows版本Git的都知道Git自带了Git Bash,这个在很大程度上满足了我的需求,随着Git的版本升级越来越好用 安装Cmder Cmder官网,它把conemu,msysgit和cl ...

  6. Spring+SpringMVC+MyBatis的整合

    1.基本概念   1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-On ...

  7. Confluence 6 嵌入的 H2 数据库

    为了让你的 Confluence 在安装成功后就可以使用而不需要使用任何外部的数据库,Confluence 使用一个嵌入的 H2 数据库. 当你选择对 Confluence 进行评估和测试的时候,H2 ...

  8. Confluence 6 影响语言的其他设置

    一个独立的用户可以在 Confluence 中选择应用到界面文字和消息中的语言.请注意,支持的语言类型基于在 Confluence 中安装的语言包. 你登录使用 Confluence 回话的语言基于下 ...

  9. AFN 请求报 415错误解决方案

    使用 AFHTTPSessionManager  发起请求时 设置下面两句代码 manager.requestSerializer = [AFJSONRequestSerializer seriali ...

  10. 第九单元 利用vi编辑器创建和编辑正文文件

    vi编辑器简介  什么是vi vi编辑器的操作模式 vi编辑器的3种基本模式 在vi编辑器中光标的移动 移动光标位置的键与光标移动间的关系 进入插入模式 从命令行模式进入插入模式的命令 在命令行模式下 ...