react 组件的渲染、数据交互

快来打我* 2021-07-24 12:15 518阅读 0赞

React组件
    
    	(1)React整体是一个组件化设计,为了拆分模块
    	(2)组件和组件之间可以嵌套,即另一个组件函数内,可以使用其他组件<xx />
    
    	创建组件
    		注意:xx命名必须首字母大写
    
    		var xx=React.createClass({
    			render:function(){
    				return 渲染的内容
    			}		
    	
    		})
    
    	渲染组件
    		ReactDOM.render(<xx />,节点位置成为其子元素)
    	
    	组件的数据交互(参数传递)
    	
    	父向子组件
    		(1)父传递数据:在组件对应的标签中,按照html语法写键值对
    		(2)子接收数据:在组件内部,{this.props.键名}
    	
    	子向父传递数据
    		(1)父组件按照第一种,将方法传递给子组件
    		(2)子组件props接收方法,将参数作为数据,调用方法传递给父组件
    		
    	父组件调用子组件内部方法/属性
    		方式一:设置ref
    		方式二:父组件传递函数给子组件,子组件接收函数,在componentDidMount中将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>
    
    	</style>
    	
    </head>
    <body>
      <div class="big">
    
      </div>
      <div class="big2">
    
      </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>
    					<ul>
    						<li><a href="#">百度</a></li>
    						<li><a href="#">谷歌</a></li>
    						<li><a href="#">新浪{ this.props.war}</a></li>
    					</ul>
    				</div>
          		)}
          })
    
    		var Hello = React.createClass({ 
            render:function(){ 
              return(
                <div><World war="where"/>{ this.props.titles}</div>
              )
            }
          })
    
    		
          ReactDOM.render(<Hello titles="jeff"/>,document.querySelector(".big2"))
    
    
    
    
    	</script>
    	
    </body>
    
    </html>