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

[[420985]]

本文转载自微信公众号「勾勾的前端世界」，作者西岭。转载本文请联系勾勾的前端世界公众号。

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

父级组件传递数据

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

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 ( 
    <div> 
      {/* 将需要传递的数据，以属性的方式，写入组件 */} 
      <PropsClasstoClass={toData}/> 
      <PropsFuntoFun={toData}/> 
    </div> 
  ) 
} 
 
exportdefault App 

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

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

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

class 子级组件接受数据

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

import React, { Component, Fragment } from'react' 
 
exportclass PropsClass extends Component { 
  render() { 
    return ( 
      <Fragment> 
        <h1>接受Props 数据</h1> 
        {console.log(this.props.toClass)}{/* 打印数据 */} 
        {/* 遍历数据 */} 
        {this.props.toClass.map(item => 
        ( 
          <divkey={item.id}> 
            <span>{item.name}</span><span>{item.age}</span> 
          </div> 
        ) 
        )} 
      </Fragment> 
    ) 
  } 
} 
 
exportdefault PropsClass 

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

函数子级组件接受数据

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

import React, { Fragment } from'react' 
 
// 函数形参获取Props 传值 
functionPropsFun(props) { 
  return ( 
    <Fragment> 
      <h1>函数接受Props </h1> 
      {console.log(props.toFun)} 
      {/* 遍历数据 */} 
      {props.toFun.map(item=> 
        ( 
        <divkey={item.id}> 
          <span>{item.name}</span> 
        </div> 
        ) 
      )} 
    </Fragment> 
  ) 
} 
 
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 ( 
    <div> 
      {/* 结构数据并传入*/} 
      <PropsClass{...toData[0]}/> 
      <PropsFun{...toData[1]}/> 
    </div> 
  ) 
} 
 
exportdefault App 

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

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

class 子级组件接受数据

依然使用 props 获取传参。

import React, { Component, Fragment } from'react' 
 
exportclass PropsClass extends Component { 
 
  render() { 
    // 获取传入的解构数据 
    const {name,age} =this.props 
    return ( 
      <Fragment> 
        <h1>Class 接受Props 数据</h1> 
        {console.log(name,age,'--')}{/* 打印数据 */} 
 
      </Fragment> 
    ) 
  } 
} 
 
exportdefault PropsClass 

函数子级组件接受数据

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

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

设置默认值

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

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

import React from'react' 
// 引入单文件组件 
import PropsClass from'./PropsClass' 
import PropsFun from'./PropsFun' 
 
functionApp() { 
  return ( 
    <div> 
      {/* 父级组件没有传值则使用子组件的默认值，传递则替换 */} 
      <PropsClassnames="llll"/> 
      <PropsFun/> 
    </div> 
  ) 
} 
 
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 ( 
      <Fragment> 
        <h2>Class 组件</h2> 
        <p>{names}</p> 
        <p>{age}</p> 
      </Fragment> 
    ) 
  } 
} 
 
exportdefault PropsClass 

函数组件设置默认值

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

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

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

import React, { Fragment } from'react' 
 
// 函数形参获取Props 传值 (结构) 
functionPropsFun(props) { 
  return ( 
   <div> 
     <h2>函数组件</h2> 
     <p>{props.name}</p> 
     <p>{props.age}</p> 
   </div> 
  ) 
} 
 
// 函数组件需要使用组件名.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 ( 
    <div> 
      <h1>我是App</h1> 
      {/* 需要传递 JSX ，写在组件双标签内*/} 
      <PropsClass> 
        {/* 可以传递多个标签*/} 
        <p>父级组件中传入的JSX, p标签，App-Class组件</p> 
        <span>父级组件中传入的JSX,span标签，App-Class组件</span> 
      </PropsClass> 
      <PropsFun/> 
    </div> 
  ) 
} 
 
exportdefault App 

class 子组件接收 JSX

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

import React, { Component, Fragment } from'react' 
exportclass PropsClass extends Component { 
  render() { 
 
    return ( 
      <Fragment> 
        <h2>Class 组件</h2> 
        {/* 接收 JSX ，可以接收多个*/} 
        {this.props.children} 
      </Fragment> 
    ) 
  } 
} 
 
exportdefault PropsClass 

函数子组件接收 JSX

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

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