))})}exportdefaultPropsFun前面我们了解了父组件如何向不同的子组件传递数据，以及子组件如何接收和处理数据，如果父组件传递更复杂的数据，子组件中如何传递数据以及如何使用，需要进一步研究.父组件给子组件传值——解构和传值父组件传递数据传递普通数据，我们之前已经接触过了，如果传递的数据是数组或者对象，我们应该如何处理呢？最直接的方式是通过，先在父组件中解构数据，因为解构后的数据刚好符合组件的“属性”：importReactfrom'react'//引入单文件组件importPropsClassfrom'./PropsClass'importPropsFunfrom'./PropsFun'//要传递的数据consttoData=[{id:1,name:"刘能",age:66},{id:2,name:"广坤",age:16}]functionApp(){return()上面的exportdefaultApp是解构传参。应用于子级组件时，与普通应用无异，按照解构后的相应格式接收即可。下面分别介绍类组件和函数组件中获取解构参数的方法。Class子级组件在接收数据时仍然使用props来接收数据。importReact,{Component,Fragment}from'react'exportclassPropsClassextendsComponent{render(){//获取传入的解构数据const{name,age}=this.propsreturn(

Class接受Props数据

{console.log(name,age,'--')}{/*打印数据*/})}}exportdefaultPropsClass函数子级组件接受数据，仍然使用函数参数获取数据。importReact,{Fragment}from'react'//函数参数获取Props传值（结构体）functionPropsFun({name,age}){return(

functionacceptsProps

fundata:{console.log(age,name)}

{name}{age}

)}exportdefaultPropsFun设置特定条件下的默认值，即使如果父组件没有传入数据，子组件仍然需要显示相关内容。那么此时，我们可以在子组件中设置默认值来填充。当父组件没有传入数据时，子组件使用默认数据，如果父组件有数据，则替换默认值。父组件是否可以传入数据：importReactfrom'react'//引入单文件组件importPropsClassfrom'./PropsClass'importPropsFunfrom'./PropsFun'functionApp(){return()}exportdefaultApp类组件设置默认值类，在子组件中使用静态defaultProps设置默认值，当然我们还是需要从this.props中获取。importReact,{Component,Fragment}from'react'exportclassPropsClassextendsComponent{//此时我们设置props的默认值，//如果父组件不传数据，则默认使用//如果传数据，替换默认值staticdefaultProps={names:'西陵老师',age:18}render(){//获取组件传入的数据，可以是默认值，也可以是传入的数据const{names,age}=this.propsreturn(

Class组件

{names}

{age}

)}}exportdefaultPropsClass函数组件设置默认值function组件需要使用组件名.defaultProps设置一个对象作为默认值，仍然使用形参获取：importReact,{Fragment}from'react'//函数形参获取Props传值（结构）functionPropsFun({name,age}){return()}//函数component需要使用componentname.defaultProps来设置一个objectPropsFun.defaultProps={name:'Xiling',age:16}exportdefaultPropsFun如果不想在子组件形式参数接收时解构，也可以直接获取props。importReact,{Fragment}from'react'//函数参数获取Props传值(结构)functionPropsFun(props){return()}//功能组件需要使用组件name.defaultProps设置一个对象PropsFun.defaultProps={name:'Xiling',age:16}exportdefaultPropsFun给子组件传递JSX给父组件传递JSX在父组件中，需要给子组件传递JSX，需要在组件的double标签中写上jsx。importReactfrom'react'//引入单文件组件importPropsClassfrom'./PropsClass'importPropsFunfrom'./PropsFun'functionApp(){return()}exportdefaultAppclass子组件接收JSX，使用this.props.children接收父组件传入的完整JSX。importReact,{Component,Fragment}from'react'exportclassPropsClassextendsComponent{render(){return(

ClassComponent

{/*接收JSX，可以接收多个*/}{this.props.children})}}exportdefaultPropsClass函数子组件从JSX函数组件接收jsx，可以直接使用props接收参数。importReact,{Fragment}from'react'//从函数组件获取jsx，可以直接使用props接收参数functionPropsFun(props){return()}//功能组件需要使用组件名.defaultProps设置一个对象PropsFun.defaultProps={name:'西菱',age:16}exportdefaultPropsFun