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

回忆一下前三篇：

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

父级组件传递数据

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

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

未完待续...

明天更新组件布局小案例！

推荐阅读：

能替代 Vue 和 React 的框架，长什么样子？

计时器组件的两种写法：高阶组件就是坠吼的！

性能优化方案，搞定 React 的纯组件！

恭喜你又在前端道路上进步了一点点。

点个“在看”和“赞”吧！