reactjs函数式组件使用props属性代码示例

比眉伴天荒 2024-02-17 13:35 67阅读 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>
    	
    	
    	<script type="text/javascript" src="../js/react.development.js"></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/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>