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. groupID和artifactID填什么

    Maven的pom.xml文件中的groupID和artifactID: GroupID是项目组织唯一的标识符,实际对应JAVA的包的结构,是main目录里java的目录结构.ArtifactID就是 ...

  2. [PHP]一些坑

    一.如果有一个字符串变量等于'error',它跟0 == 运算时,会返回true,但是它并不是一个预置常量 $test = 'error'; var_dump($test == 0);//true 二 ...

  3. Android录制音频的三种方式

    对于录制音频,Android系统就都自带了一个小小的应用,可是使用起来可能不是特别的灵活.所以有提供了另外的俩种. 下边来介绍下这三种录制的方式; 1.通过Intent调用系统的录音器功能,然后在录制 ...

  4. SqlBulkCopy 之 Received an invalid column length from the bcp client for colid 5.

    SqlBulkCopy 批量复制报错: Received an invalid column length from the bcp client for colid 5. 翻译:从bcp客户端收到一 ...

  5. Android 组件化方案探索与思考

    Android 组件化方案探索与思考 组件化项目,通过gradle脚本,实现module在编译期隔离,运行期按需加载,实现组件间解耦,高效单独调试. 本项目github地址 https://githu ...

  6. window Maven私服搭建——nexus

    注:本文来源于 <window   Maven私服搭建--nexus> Maven私服搭建--nexus 1.下载nexus https://www.sonatype.com/downlo ...

  7. ORACLE环境变量定义

    export在linux的bash中可以理解为设置环境变量.设置后能够被当前的shell及子shell使用. 这些变量的含义有一些有意义,可以查看相应的文档,我给你解释一些我知道的: ORACLE_H ...

  8. Confluence 6 数据中心的缓存

    在 Confluence 数据中心(集群)你需要分布缓存和每一个节点的缓存.在集群管理界面,将会定义分布缓存和节点本地缓存. 缓存配置文件存储在集群共享目录中的 home 目录下面. https:// ...

  9. Guideline 5.2.1 - Legal - Intellectual Property 解决方案

    最近在上架公司公司项目的时候遇到这个问题什么5.2.1 然后去了解发现最近不少人都遇到了这个问题.先说一下 我上架的APP是一个医疗的APP然后说需要什么医疗资质,估计是账号的公司资质不够吧.后面和苹 ...

  10. Swift 通过字符串创建控制器

    由于Swift 中新增了一个命名空间(在同一个命名空间中的文件可以直接访问而不用引入头文件)的概念 所以通过字符串创建控制器需要带上命名空间 1 首先为Bundle 写一个分类  获取命名空间 ext ...