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. 2-HTML Text Formatting Elements

    下表列举了文字格式常见的关键字 Tag Description <b> Defines bold text <em> Defines emphasized text  < ...

  2. bootstrapValidator使用总结

    1.根据条件动态增删检查条件 参考文章:https://blog.csdn.net/sxlzs_/article/details/78211928 #去除某字段的验证 $("#formRes ...

  3. 【原创】大叔经验分享（30）CM开启kerberos

    kerberos安装详见:https://www.cnblogs.com/barneywill/p/10394164.html 一 为CM创建用户 # kadmin.local -q "ad ...

  4. [JavaScript]iframe的contentWindow

    HTMLIFrameElement.contentWindow返回的是HTMLIFrameElement类型元素的window对象 通过此对象可以修改iframe实体内的window行为 <if ...

  5. JavaScript自定义对象

    一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascrip ...

  6. 洛谷P4689 [Ynoi2016]这是我自己的发明 [莫队]

    传送门 ynoi中比较良心不卡常的题. 思路 没有换根操作时显然可以变成dfs序莫队随便搞. 换根操作时一个子树可以变成两段区间的并集,也随便搞搞就好了. 这题完全不卡常,随便过. 代码 #inclu ...

  7. FlashBack 闪回

    [学习目标] Flashback Database 功能非常类似与RMAN的不完全恢复,它可以把整个数据库回退到 过去的某个时点的状态,这个功能依赖于Flashback log日志.比RMAN 更快速 ...

  8. Confluence 6 附件存储提取文本文件

    当基于文本的文件上传到 Confluence(例如,Word,PowerPoint 等),这些文件中的文本是可以提取并且添加到索引中的,用户可以通过索引来搜索这些文件中的文本内容,不仅仅是搜索文件名. ...

  9. Es6模块语法笔记

    /** * Created by Administrator on 2017/4/15. */ /*---------------------export命令--------------------- ...

  10. webpack2配置备份

    package.json: { "name": "leyi", "version": "1.0.0", "ma ...