reactjs组件实例三大属性之props属性代码示例：props的简写方式

你的名字 2024-02-17 13:35 25阅读 0赞

如下代码展示了如何使用React框架创建一个简单的组件。首先，需要引入React核心库和相关插件，然后创建一个继承自React.Component的类，即组件类。在组件类中，通过构造函数接收props，并在构造函数中访问props。使用静态属性propTypes和defaultProps对组件的标签属性进行类型和必要性的限制，并指定默认值。最后，通过ReactDOM.render将组件渲染到页面中。

<!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">
    		//创建组件
    		class Person extends React.Component{
          
    
    			constructor(props){
          
    				//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
    				// console.log(props);
    				super(props)
    				console.log('constructor',this.props);
    			}
    
    			//对标签属性进行类型、必要性的限制
    			static propTypes = {
          
    				name:PropTypes.string.isRequired, //限制name必传，且为字符串
    				sex:PropTypes.string,//限制sex为字符串
    				age:PropTypes.number,//限制age为数值
    			}
    
    			//指定默认标签属性值
    			static defaultProps = {
          
    				sex:'男',//sex默认值为男
    				age:18 //age默认值为18
    			}
    			
    			render(){
          
    				// console.log(this);
    				const {
          name,age,sex} = this.props
    				//props是只读的
    				//this.props.name = 'jack' //此行代码会报错，因为props是只读的
    				return (
    					<ul>
    						<li>姓名：{
          name}</li>
    						<li>性别：{
          sex}</li>
    						<li>年龄：{
          age+1}</li>
    					</ul>
    				)
    			}
    		}
    
    		//渲染组件到页面
    		ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
    	</script>
    </body>
    </html>