React给添加元素增加样式

最新推荐文章于 2024-04-24 14:28:40 发布

Web攻城狮

最新推荐文章于 2024-04-24 14:28:40 发布

阅读量1.7w

点赞数 2

分类专栏： react 文章标签： React 动态添加元素增加样式

本文链接：https://blog.csdn.net/b1244154318/article/details/52674773

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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"}
}

不提倡使用style样式及行间样式,使用外部js的方式或者原型链的比较好.

Web攻城狮

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React给添加元素增加样式

React给添加元素增加样式第一种方法: React .lala{ color:red; font-size: 40px; } var Hello=React.createClass({ render
复制链接

扫一扫

专栏目录