React 复习 props

最新推荐文章于 2023-05-19 17:49:26 发布

旧雨化碧

最新推荐文章于 2023-05-19 17:49:26 发布

阅读量71

点赞数

分类专栏： React博客项目

本文链接：https://blog.csdn.net/weixin_44428467/article/details/118158586

版权

React博客项目专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的展开运算符用法，包括数组的展开、函数参数的传递以及对象的复制与合并。此外，还讲解了在React组件中如何使用props属性，包括设置props的限制、默认值以及在函数式组件中的应用。

摘要由CSDN通过智能技术生成

展开运算符复习：

<script type="text/javascript" >
			let arr1 = [1,3,5,7,9]
			let arr2 = [2,4,6,8,10]
			console.log(...arr1); //展开一个数组
			let arr3 = [...arr1,...arr2]//连接数组
			
			//在函数中使用
			function sum(...numbers){
				return numbers.reduce((preValue,currentValue)=>{
					return preValue + currentValue
				})
			}
			console.log(sum(1,2,3,4));

			//构造字面量对象时使用展开语法
			let person = {name:'tom',age:18}
			let person2 = {...person}
			//console.log(...person); //报错，展开运算符不能展开对象
			person.name = 'jerry'
			console.log(person2);
			console.log(person);

			//合并
			let person3 = {...person,name:'jack',address:"地球"}
			console.log(person3);
			
		</script>

组件的props属性

 class Person extends React.Component{
            
对标签属性进行类型、必要性的限制.static 使之成为组件本身的属性。
            static propTypes={
                name:PropTypes.string.isRequired,
                sex:PropTypes.string,
                age:PropTypes.number
           }
            static defaultProps={
               sex:'male',
                age:18
           }
            render(){
                const {name,sex,age}=this.props
                return (
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age}</li>
                    </ul>
                )
            }
        }
        //设置属性的限制
        
        const p={name:'liu',sex:'male',age:12}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test'))

函数式组件使用props

 function MyComment(props){
           const {name,sex,age}=props
        return (
            <ul>
                <li>姓名:{name}</li>
                <li>性别:{sex}</li>
                <li>年龄:{age}</li>
            </ul>
        )
       }
       MyComment.propTypes={
                name:PropTypes.string.isRequired,
                sex:PropTypes.string,
                age:PropTypes.number
           }
        MyComment. defaultProps={
            sex:'male',
            age:18
        }
        ReactDOM.render(<MyComment name="jeery" sex="famal" age="23"/>,document.getElementById('test'))