react 组件的渲染、数据交互

React组件

	(1)React整体是一个组件化设计,为了拆分模块
	(2)组件和组件之间可以嵌套,即另一个组件函数内,可以使用其他组件

	创建组件
		注意:xx命名必须首字母大写

		var xx=React.createClass({
			render:function(){
				return 渲染的内容
			}		
	
		})

	渲染组件
		ReactDOM.render(,节点位置成为其子元素)
	
	组件的数据交互(参数传递)
	
	父向子组件
		(1)父传递数据:在组件对应的标签中,按照html语法写键值对
		(2)子接收数据:在组件内部,{this.props.键名}
	
	子向父传递数据
		(1)父组件按照第一种,将方法传递给子组件
		(2)子组件props接收方法,将参数作为数据,调用方法传递给父组件

代码示例:

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

你可能感兴趣的:(React,react)