React 入门第四步：组件间的值传递 Props

2024-12-14 01:26

关注

父组件向子组件传值 -普通传值

父级组件传递数据

默认情况由父级组件传递数据到子级组件，我们将需要传递的数据，以属性的方式，写入组件中，如下：

import React from'react' 
// 引入单文件组件 
import PropsClass from'./PropsClass' 
import PropsFun from'./PropsFun' 
 
// 要传递的数据 
const toData = [ 
  {id:1,name:"刘能",age:66}, 
  {id:2,name:"广坤",age:16} 
] 
 
functionApp() { 
  return ( 
     
      {}

   ) 
} 
 
exportdefault App

这样就完成了父级组件向子级组件传递数据的任务。

那么组件又分为函数组件和类组件。下面，我们分别展示类组件和函数组件是如何获取传递进来的数据的。

我们先看类组件的获取方式。

class 子级组件接受数据

class 组件中使用 this.props.xx 属性名获取父级组件传递的数据：

import React, { Component, Fragment } from'react' 
 
exportclass PropsClass extends Component { 
  render() { 
    return ( 
       
         
        {console.log(this.props.toClass)}{} 
        {} 
        {this.props.toClass.map(item => 
        ( 
           
            {item.name}{item.age}

         ) 
        )} 
       
    ) 
  } 
} 
 
exportdefault PropsClass

类组件中 this 操作相对容易，因此，React 默认会将父级组件的传入的数据放入 props 属性中。而在类组件中，如代码所示，我们就可以直接使用 this.props 来获取数据了。

函数子级组件接受数据

函数组件中，Props 数据会默认传入函数，因此需要在函数形参中获取，直接使用即可。

import React, { Fragment } from'react' 
 
// 函数形参获取Props 传值 
functionPropsFun(props) { 
  return ( 
     
       
      {console.log(props.toFun)} 
      {} 
      {props.toFun.map(item=> 
        ( 
         
          {item.name} 
         
        ) 
      )} 
     
  ) 
} 
 
exportdefault PropsFun

前面我们学习了父级组件向不同的子级组件传递数据，以及子级组件如何接受数据并处理，而如果父级组件传递较为复杂的数据时，如何传递数据，如何在子组件中使用，就需要我们进一步学习了解。

父组件向子组件传值 -解构传值

父级组件传递数据

传递普通数据，前面我们已经接触过了，如果要是传递的数据是数组或者对象，我们应该如何处理呢?

最直接的办法就是在传递时，在父级组件中将数据先进行解构，因为解构出来的数据，正好就是符合组件 “属性” 写法的：

import React from'react' 
// 引入单文件组件 
import PropsClass from'./PropsClass' 
import PropsFun from'./PropsFun' 
 
// 要传递的数据 
const toData = [ 
  {id:1,name:"刘能",age:66}, 
  {id:2,name:"广坤",age:16} 
] 
 
functionApp() { 
  return ( 
     
      {} 
       
       
     
  ) 
} 
 
exportdefault App

上面是解构传参。而在子级组件中应用时，与普通的应用并没有区别，按照解构好的对应格式进行接收就可以了。

下面我们分别展示类组件和函数组件中获取解构传参的方式。

class 子级组件接受数据

依然使用 props 获取传参。

import React, { Component, Fragment } from'react' 
 
exportclass PropsClass extends Component { 
 
  render() { 
    // 获取传入的解构数据 
    const {name,age} =this.props 
    return ( 
       
         
        {console.log(name,age,'--')}{} 
 
       
    ) 
  } 
} 
 
exportdefault PropsClass

函数子级组件接受数据

依然使用函数形参获取数据。

import React, { Fragment } from'react' 
 
// 函数形参获取Props 传值 (结构) 
functionPropsFun({ name, age }) { 
  return ( 
     
       
      fun 数据： 
      {console.log(age, name)} 
       
        {name} 
        {age} 
       
     
  ) 
} 
 
exportdefault PropsFun

设置默认值

在一定的条件下，父级组件即便没有传入数据，子组件依然需要展示相关内容。那么此时，我们就可以在子组件中设置默认值来填充，当父级组件没有传入数据时，子组件使用默认数据，而如果父级组件有数据传入，则替换默认值。

父级组件可以传入数据，也可以不传入：

import React from'react' 
// 引入单文件组件 
import PropsClass from'./PropsClass' 
import PropsFun from'./PropsFun' 
 
functionApp() { 
  return ( 
     
      {} 
      "llll"/> 
       
     
  ) 
} 
 
exportdefault App

类组件设置默认值

class 子组件中使用 static defaultProps 设置默认值，当然，我们依然需要从 this.props 中获取。

import React, { Component, Fragment } from'react' 
 
exportclass PropsClass extends Component { 
 
  // 此时我们就设置了 props 的默认值， 
  // 如果父组件没有传递数据，则默认使用 
  // 如果传递了数据，则替换默认值 
  static defaultProps = { 
    names:'西岭老湿', 
    age:18 
  } 
 
 
  render() { 
    // 获取组件传入的数据，可能是默认值，也可能是传入的数据 
    const {names,age} =this.props 
    return ( 
       
        Class 组件
 
        {names}
 
        {age}
 
       
    ) 
  } 
} 
 
exportdefault PropsClass

函数组件设置默认值

函数组件需要使用组件名 .defaultProps 设置一个对象作为默认值，依然使用形参获取：

import React, { Fragment } from'react' 
 
// 函数形参获取Props 传值 (结构) 
functionPropsFun({ name, age }) { 
  return ( 
    
     函数组件
 
     {name}
 
     {age}
 
    
  ) 
} 
 
// 函数组件需要使用组件名.defaultProps设置一个对象 
PropsFun.defaultProps= { 
  name:'西岭', 
  age:16 
} 
 
exportdefault PropsFun

如果不想在子组件的形参接收时解构，也可以直接获取 props。

import React, { Fragment } from'react' 
 
// 函数形参获取Props 传值 (结构) 
functionPropsFun(props) { 
  return ( 
    
     函数组件
 
     {props.name}
 
     {props.age}
 
    
  ) 
} 
 
// 函数组件需要使用组件名.defaultProps设置一个对象 
PropsFun.defaultProps= { 
  name:'西岭', 
  age:16 
} 
 
exportdefault PropsFun

向子组件传递 JSX

父级组件传递 JSX

在父级组件中，需要向子级组件传递 JSX ，需要将 jsx 写在组件的双标签内。

import React from'react' 
// 引入单文件组件 
import PropsClass from'./PropsClass' 
import PropsFun from'./PropsFun' 
 
functionApp() { 
  return ( 
     
       
      {} 
       
        {} 
        父级组件中传入的JSX, p标签，App-Class组件
 
        父级组件中传入的JSX,span标签，App-Class组件 
       
       
     
  ) 
} 
 
exportdefault App

class 子组件接收 JSX

使用 this.props.children 可以接收父级组件中传入的全部 JSX。

import React, { Component, Fragment } from'react' 
exportclass PropsClass extends Component { 
  render() { 
 
    return ( 
       
        Class 组件
 
        {} 
        {this.props.children} 
       
    ) 
  } 
} 
 
exportdefault PropsClass

函数子组件接收 JSX

函数组件中获取 jsx ,可以直接使用 props 接收参数。

import React, { Fragment } from'react' 
 
// 函数组件中获取jsx ,可以直接使用 props 接收参数 
functionPropsFun(props) { 
  return ( 
    
     函数组件
 
     {props.name}
 
     {props.age}
 
     {props.children} 
    
  ) 
} 
 
// 函数组件需要使用组件名.defaultProps设置一个对象 
PropsFun.defaultProps= { 
  name:'西岭', 
  age:16 
} 
 
exportdefault PropsFun