reactjs组件实例的三大属性之props使用示例:在函数式组件中使用props

不念不忘少年蓝@ 2023-10-02 18:07 40阅读 0赞

### props基本使用 ###

<!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/babel">
    		//创建组件
    		class Person extends React.Component{
          
    			render(){
          
    				// console.log(this);
    				const {
          name,age,sex} = this.props
    				return (
    					<ul>
    						<li>姓名：{
          name}</li>
    						<li>性别：{
          sex}</li>
    						<li>年龄：{
          age+1}</li>
    					</ul>
    				)
    			}
    		}
    		//渲染组件到页面
    		ReactDOM.render(<Person name="jerry" age={
          19}  sex="男"/>,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'))
    	</script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]

### 对props进行限制 ###

<!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>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16 1]

### props的简写方式 ###

<!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>

![在这里插入图片描述][02cd64f5d79f4b48b47760071a520f23.png]

### 函数式组件使用props ###

<!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>

![在这里插入图片描述][b1b3dd0ca8874247a330158423592517.png]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/767da86537354c38a2f525d7b6885861.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/8588ca33f44c4ed1a25aed81c988deb5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w,size_20,color_FFFFFF,t_70,g_se,x_16
[02cd64f5d79f4b48b47760071a520f23.png]: https://img-blog.csdnimg.cn/02cd64f5d79f4b48b47760071a520f23.png
[b1b3dd0ca8874247a330158423592517.png]: https://img-blog.csdnimg.cn/b1b3dd0ca8874247a330158423592517.png