React (二) 组件

最新推荐文章于 2022-04-24 22:39:09 发布

人生迷茫

最新推荐文章于 2022-04-24 22:39:09 发布

阅读量145

点赞数

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

本文链接：https://blog.csdn.net/chenxing12345678hhh/article/details/106441975

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

组件声明

1，函数组件

//组件名称必须首字母大写
		function MyCom(){
			
			return <h1>hello world</h1>;
		}
		let msg = 'hello'; //父组件
		ReactDOM.render(<MyCom />,document.getElementById('root'))

2，类组件

可以通过ES6中的类来创建组件，该类继承React.Component，并且拥有一个render()函数，该函数的作用于函数组件的那个函数一样，用于返回一个JSX。

<head>
	<meta charset="UTF-8">
	<title>类组件</title>
	<script src="../xn_react_day01/js/react.js"></script>
	<script src="../xn_react_day01/js/react-dom.js"></script>
	<script src="../xn_react_day01/js/babel.min.js"></script>
	<script type="text/babel">
		//类组件
        //state是组件内部维护的一组用于反映组件UI变化的状态集合。state需要在构造函数中进行初始化，如果要在组件类中重写构造函数，那么需要在构造函数的第一行显式调用super(props)

		class MyCom extends React.Component{
			constructor(props){
				super(props);
				//状态的初始化 state是该组件可以使用的数据模型，组件内部自己的数据
				this.state = {
					msg:'hello'
				};
			}
			//必须重写，代表返回的模板
			render(){
				return <h1>{this.state.msg}</h1>
			}
		}
		ReactDOM.render(<MyCom/>,document.getElementById('root'));
	</script>
</head>
<body>
	<div id="root"></div>
</body>
</html>

组件传值

1.在父组件中使用子组件的时候，写属性名=属性值。这里的属性名和属性值，会存到props对象中。在函数声明组件，props在函数的形参这里。
2.在子组件的内部，可以使用{props.属性名}获得父组件传的数据

function MyCom(props){
			//props={test:'world'} 父组件给子组件的数据
			let msg = 'hello'; //本组件内部的数据
			return (
				<div>
					<h1>{msg}--{props.test}--{props.msg}--{props.obj.name}--{props.arr}---{props.temp}--{props.bool.toString()}----</h1>
				</div>
			);
			//条件渲染
			/*if(props.bool){
				return <div>boolean值是true</div>
			}else{
				return <div>boolean值是false</div>
			}*/
		}
		//将这个msg传递到子组件内部使用
		let msg = 'world';
		let obj = {name:'zhangsan'};
        //传递字符串test= '你好'
        //传递对象obj={{name:'zhangsan'}}
        //传递数组arr={[1,2,3]}
        //传递数字temp={1,2,3}  注意传递最后的数字    3
		ReactDOM.render(<MyCom test={msg} msg='2' obj={{name:'zhangsan'}} arr={[1,2,3]} temp={1,2,3} bool={false}/>,document.getElementById('root'));

渲染

1，基本渲染

function Welcome(props) {  
  let msg = 'hello world'
  return <h1>{msg}</h1>;
}

2，条件渲染

React中的条件渲染和JavaScript中的一样，使用JavaScript运算符if或者条件运算符去创建元素来表现当前的状态，然后让React根据它们来更新UI

function UserInfo(props){
  let {user} = props;
  if(user) {
    return (
 	<div>欢迎您 {user.name} 头像</div>
    )
  } 
  return (
    <div><a href="#">亲，请登录</a></div>
  )
}
ReactDOM.render(<UserInfo user={{name:'zhangsan'}}/>,document.getElementById('app'));

3，列表渲染

可以通过使用 {} 在 JSX 内构建一个元素集合, key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识

<ul className="list">      
  {        
    data.map((item,index) => return <li key={index}>{item}</li>) 
  }    
</ul>

人生迷茫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React (二) 组件

组件声明1，函数组件//组件名称必须首字母大写 function MyCom(){ return <h1>hello world</h1>; } let msg = 'hello'; //父组件 ReactDOM.render(<MyCom />,document.getElementById('root'))2，类组件可以通过ES6中的类来创建组件，该类继承React.Component，并且拥有一个render()函数，
复制链接

扫一扫