react 组件的渲染、数据交互

最新推荐文章于 2023-08-10 05:00:00 发布

神奇大叔

最新推荐文章于 2023-08-10 05:00:00 发布

阅读量844

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/weixin_43294560/article/details/104262842

版权

React 专栏收录该内容

44 篇文章 4 订阅

订阅专栏

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>

神奇大叔

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
react 组件的渲染、数据交互

React组件 (1)React整体是一个组件化设计,为了拆分模块 (2)组件和组件之间可以嵌套,即另一个组件函数内,可以使用其他组件<xx /> 创建组件注意:xx命名必须首字母大写 var xx=React.createClass({ render:function(){ return 渲染的内容 } }) 渲染组件 R...
复制链接

扫一扫