reactjs组件实例的三大属性之props属性代码示例：对props进行限制

布满荆棘的人生 2024-02-17 13:17 51阅读 0赞

这段HTML代码是一个React组件示例，使用了React、ReactDOM和Babel库。代码中定义了一个名为Person的组件，通过使用PropTypes对组件的标签属性进行类型和必要性的限制。组件有一个render函数，返回一个包含属性值的ul标签。通过设置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{
          
    			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>
    				)
    			}
    		}
    		//对标签属性进行类型、必要性的限制
    		Person.propTypes = {
          
    			name:PropTypes.string.isRequired, //限制name必传，且为字符串
    			sex:PropTypes.string,//限制sex为字符串
    			age:PropTypes.number,//限制age为数值
    			speak:PropTypes.func,//限制speak为函数
    		}
    		//指定默认标签属性值
    		Person.defaultProps = {
          
    			sex:'男',//sex默认值为男
    			age:18 //age默认值为18
    		}
    		//渲染组件到页面
    		ReactDOM.render(<Person name={
          100} speak={
          speak}/>,document.getElementById('test1'))
    		ReactDOM.render(<Person name="tom" age={
          18} sex="女"/>,document.getElementById('test2'))
    
    		const p = {
          name:'老刘',age:18,sex:'女'}
    		// console.log('@',...p);
    		// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
    		ReactDOM.render(<Person {
          ...p}/>,document.getElementById('test3'))
    
    		function speak(){
          
    			console.log('我说话了');
    		}
    	</script>
    </body>
    </html>