prop传参(react)

组件中可以通过 Prop 来接收组件外部传递的数据。

一、传递参数
React 中传递参数和 Vue 种类似，除了普通字符串以外，其他类型的数据都需要以 {} 的形式传递：

import React, { Component } from 'react'
import FunctionChild from './FunctionChild'
import ClassesChild from './ClassesChild'

export default class Father extends Component {
    state = {
        gender: '女'
    }
    render() {
        return (
            <div>
                <FunctionChild name="张三" age={20} gender={this.state.gender}></FunctionChild>
                <ClassesChild name="李四" age={30} gender={this.state.gender}></ClassesChild>
            </div>
        )
    }
}

扩展运算符的形式传参
传递对象多个属性时，可以直接以扩展运算符的方式进行传递：

export default class Father extends Component {
    state = {
        goods: {
            id: 1, 
            name: '苹果',
            price: '15',
            count: 3
        }
    }
    render() {
        return (
            <div>
                <FunctionChild {...this.state.goods}></FunctionChild>
                <ClassesChild {...this.state.goods}></ClassesChild>
            </div>
        )
    }
}

如果传递给子组件的对象，不是所有属性都需要传递，不建议用这种方式。

二、Props 接收参数
props 在函数式组件和类定义组件中的使用方式略有不同。

1、函数式组件中的 Props
函数式组件中，props 对象直接通过函数形参的方式来获取：

export default function FunctionChild(props) {
    console.log('props', props);
    return (
        <div>
            <h2>函数组件</h2>
            <p>你好，{props.name}</p>
        </div>
    )
}

2、类定义组件中的 Props
类定义组件中，props 是通过 super() 方法继承而来：

import React, { Component } from 'react'

export default class ClassesChild extends Component {
    constructor(props) {
          super(props);
    }
    render() {
        console.log('this.props', this.props);
        return (
            <div>
                <h2>类组件</h2>
                <p>你好，{this.props.name}</p>
            </div>
        )
    }
}

当然，上面的代码我们还可以简写一下，将 constructor 省略掉：

import React, { Component } from 'react'

export default class ClassesChild extends Component {
    render() {
        console.log('this.props', this.props);
        return (
            <div>
                <h2>类组件</h2>
                <p>你好，{this.props.name}</p>
            </div>
        )
    }
}

React 中的属性和方法都是通过 props 进行传递。

三、Props 的只读性
React 中的 props 也是“单向数据流”，当父组件将数据传递给子组件后，父组件的数据发生改变，子组件的数据也会随之发生改变。但是，无论是函数组件还是类组件，都决不能修改自身的 props。

React 非常灵活，但它也有一个严格的规则：

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

四、Props 的默认值
React 中提供了 defaultProps 属性用于设置组件中 props 的默认值。defaultProps 在函数式组件和类定义组件中的使用方式也略有不同。

1、函数式组件中的 defaultProps
在函数式组件中，defaultProps 作为函数对象的一个属性，在函数外部定义：

export default function FunctionChild(props) {
    console.log('props', props);
    return (
        // ...
    )
}

FunctionChild.defaultProps = { a: 1 }

2、类定义组件中的 defaultProps

在类定义组件中，defaultProps 作为 class 类中的一个静态属性，通过 static 关键字来定义：

export default class ClassesChild extends Component {
    static defaultProps = {
        a: 1
    }
    render() {
        console.log('this.props', this.props);
        return (
           // ...
        )
    }
}

五、Props 验证
1、引入依赖包
在新版本的 React 中，内置了 prop-types 依赖包，在旧版本中，需要单独去下载该依赖包：

import PropTypes from 'prop-types'
2、基本语法
组件名.propTypes = {
    数据名: PropTypes.类型
}
3、常见的类型
PropTypes.number
PropTypes.string
PropTypes.bool
PropTypes.object
PropTypes.array
PropTypes.func
PropTypes.any  // 任意类型
PropTypes.oneOfType([PropTypes.number, PropTypes.string, ...]) // 匹配数组中任意一个
PropTypes.element // 匹配 React 元素或组件