reaat学习笔记--组件（一）

最新推荐文章于 2024-01-25 09:50:37 发布

家里有蜘蛛

最新推荐文章于 2024-01-25 09:50:37 发布

阅读量306

点赞数 1

分类专栏： # React学习笔记

本文链接：https://blog.csdn.net/qq_44983621/article/details/100848636

版权

React学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

reacat学习笔记–组件（一）

分为简单组件和复杂组件
1.简单组件使用function
2.复杂组件使用class
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="example1"></div>
		<div id="example2"></div>
		
		<script src="../js/react.development.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<script  type="text/javascript" src="../js/babel.min.js"></script>
		
		<script type="text/babel">
			//1.动议组键
			
			function MyComponent(){
				return <h2>工厂函数组件(简单组件:没有状态的组件)</h2>
			}
			
			//方式2.es6类组件
			class MyComponent2 extends React.Component{
				render(){
					return <h2>工厂组件函数(复杂组件)</h2>
				}
			}
			
			//2.渲染组件标签
			ReactDOM.render(<MyComponent />,document.getElementById('example1'))
			ReactDOM.render(<MyComponent2 />,document.getElementById('example2'))
		</script>
	</body>
</html>

家里有蜘蛛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
reaat学习笔记--组件（一）

reacat学习笔记–组件（一）分为简单组件和复杂组件1.简单组件使用function2.复杂组件使用class<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body&gt...
复制链接

扫一扫