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. python习题实例（上）_update18/07/03

    用以记录python学习过程中做过的小习题~ ヾ(◍°∇°◍)ﾉﾞ 1.生成两个列表,分别存放将100以内的偶数&奇数 odd_number=[] even_number=[] for i i ...

  2. 移动端触屏滑动touches使用

    代码 var start = { x: 0, y: 0 } var end = { x: 0, y: 0 } document.addEventListener('touchstart', funct ...

  3. 软件包.deb的安装及卸载------dpkg

    文章链接:https://blog.csdn.net/qq_36764147/article/details/81332606 删除带有rc的软件包:https://blog.csdn.net/chr ...

  4. js跳转页面（转）

    <span id="tiao">3</span><a href="javascript:countDown"></a& ...

  5. js——class基础

    js的类?其实还是原型! class Point{ constructor(x, y){ this.x = x; this.y = y; } toString(){ return '(' + this ...

  6. Confluence 6 恢复一个站点问题解决

    如果你在导入的时候遇到了问题,检查下面的一些提示. 你的文件太大而不能上传?这个是非常常见的错误.出现的原因是备份文件不能在规定的时间内上传到服务器上.为了避免这个错误,放置你的导出文件到  < ...

  7. 修改Mysql5.7的root密码

    Mysql5.7修改root密码 禁用root密码 1.修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不 ...

  8. python垃圾回收机制:引用计数 VS js垃圾回收机制:标记清除

    js垃圾回收机制:标记清除 Js具有自动垃圾回收机制.垃圾收集器会按照固定的时间间隔周期性的执行. JS中最常见的垃圾回收方式是标记清除. 工作原理 当变量进入环境时,将这个变量标记为"进入 ...

  9. MONGODB数据基础与命令

  10. json字符串和字典的区别补充

    json字符串和字典的区别:json:(JavaScript Object Notation)的首字母缩写,字面的意思是(javascript对象表示法),这里说的json指的是类似于javascri ...