React 入门第四步：组件间的值传递 Props-vue 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 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

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

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

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

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 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

类组件中 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 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

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

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

父级组件传递数据

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

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

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 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

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

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

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 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

函数子级组件接受数据

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

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 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

设置默认值

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

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

import React from'react' 
// 引入单文件组件 
import PropsClass from'./PropsClass' 
import PropsFun from'./PropsFun' 
 
functionApp() { 
  return ( 
    <div> 
      {/* 父级组件没有传值则使用子组件的默认值，传递则替换 */} 
      <PropsClassnames="llll"/> 
      <PropsFun/> 
    </div> 
  ) 
} 
 
exportdefault App 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

类组件设置默认值

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 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

函数组件设置默认值

函数组件需要使用组件名 .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 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

如果不想在子组件的形参接收时解构，也可以直接获取 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 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

向子组件传递 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 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

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 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

函数子组件接收 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 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.