reactjs函数式组件使用props属性代码示例
  0SnbOly3LC5t 2023年12月10日 20 0


这段HTML代码是一个使用React函数组件的例子。首先引入了React和ReactDOM的核心库以及Babel和prop-types库。然后定义了一个名为Person的函数组件,该组件接收name、sex和age三个props。通过使用PropTypes对象来限制了这些props的类型。此外,还指定了sex和age的默认值。最后使用ReactDOM.render将该组件渲染到页面中的一个具有id为test1的div元素中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数组件使用props</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom,用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel,用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<!-- 引入prop-types,用于对组件标签属性进行限制 -->
	<script type="text/javascript" src="../js/prop-types.js"></script>

	<script type="text/babel">
		//创建组件
		function Person (props){
			const {name,age,sex} = props
			return (
					<ul>
						<li>姓名:{name}</li>
						<li>性别:{sex}</li>
						<li>年龄:{age}</li>
					</ul>
				)
		}
		Person.propTypes = {
			name:PropTypes.string.isRequired, //限制name必传,且为字符串
			sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number,//限制age为数值
		}

		//指定默认标签属性值
		Person.defaultProps = {
			sex:'男',//sex默认值为男
			age:18 //age默认值为18
		}
		//渲染组件到页面
		ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
	</script>
</body>
</html>


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月10日 0

暂无评论

推荐阅读
  mQa6OV8cozXc   2024年04月14日   27   0   0 JavaScript
  MPn6CUa5JRur   2024年04月16日   20   0   0 JavaScript
  W0JYIGaysMAv   2024年04月12日   33   0   0 JavaScript
  Sb0Lu6UKRwVp   29天前   23   0   0 JavaScript
  X1N8l2v9m1kd   2024年04月13日   29   0   0 JavaScript
0SnbOly3LC5t