react 样式、事件

浅浅的花香味﹌ 2021-07-24 17:09 530阅读 0赞

React组件
    
    	添加样式和事件
    
    		样式:
    			(1)组件内class属性变成className	
    			
    				其中：写法为:className='xx'
    						 动态添加多个类:
    						  className={'类名1'+" "+"类名2"/变量}
    						  className={["类名1","类名2"].join(" ")}
    						  className={`${value.class} ${value.class2}`}
    						  className={`${布尔值&&'类名'} 类名`} 动态添加类名
    						  className={['类名1',布尔?"类名2":"类名3"].join('')}
    						  className={'类名'+" "+(布尔值&&'类名2')}  必须添加小括号,否则会将+号前面一起作为表达式结果,永真
    						  
    						  
    			(2)组件内style属性写法变成:style={
       {xx:'xx',xx:''}}  
    				其中 
    					1、键值要加{
       {}}括号 
    					2、不同键值对按,号分割
    					3、带有-的属性,变成-后首字母大写,如backgroundColor
    					4、style属性接收的是对象,所以也可写成,var obj={xx}; style={obj}
    
    		事件:
    			(1)事件名变为on后每个单词首字母大写
    				如onClick onMouseMove
    			(2)事件函数内的this代表这个组件
    			用法:
    
    				先在组件内标签添加 
    					事件名={this.函数名}
    					若是在组件外定义的函数
    					事件名={函数名}
    				然后在组件内按照对象形式补全函数
    					函数名:function(){...}
    			
    			传参数
    				事件名={(参数)=>{this.函数名(参数)}}
    				事件名={this.函数名.bind(this,参数)}

代码示例:

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<script src="js/libs/browser.min.js"></script>
    	<script src="js/libs/react.js"></script>
    	<script src="js/libs/react-dom.js"></script>
    	<script src="js/libs/jquery-3.4.1.js"></script>
    
    	<style>
    		.d1{ 
    			color:orange;
    		}
    	</style>
    	
    </head>
    <body>
      <div class="big">
    
      </div>
      <div class="big2">
    
      </div>
      <div class='big3'>
    
      </div>
    
    	<script type="text/babel">
    		
    		var arr=[1,2,3,4,5];
    		var arr1=[<p>p1</p>,<p>p2</p>,<p>p3</p>];
    		var obj=[{ name:'jeff',age:18},{ name:'mike',age:19}]
    
          var World=React.createClass({ 
          	render:function(){ 
    
          	return	(
    				<div className="d1">
    					<ul>
    						<li><a href="#">百度</a></li>
    						<li><a href="#">谷歌</a></li>
    						<li><a href="#">
    						新浪{ this.props.war}</a></li>
    						<span style={ { color:'green',fontSize:'30px'}}>我的世界</span>
    					</ul>
    				</div>
          		)}
          })
    
    
          var Thing=React.createClass({ 
    
    		render:function(){ 
    
    			return (
    				<div><button onClick={ this.click} onMouseMove={ this.move}>点我</button></div>
    			)
    		},
    		click:function(){ 
    			console.log("点击事件")
    		},
    		move:function(){ 
    			console.log("滑动事件")
    			console.log(this);
    		}
          })
    
          ReactDOM.render(<Thing />,document.querySelector(".big3"))
    
    
    
    
    	</script>
    	
    </body>
    
    </html>