React中props及（父子，子父，兄弟）组件之间的传值及prop-types

一、关于props

1、props是用来干啥的：因为组件内部是封闭的，要接收外部数据应该通过props来实现，所以props是用来接收传递给组件的数据。

2、函数组件通过参数props接收数据，类组件通过this.props接收数据。

3、props的特点：
（1）可以给组件传递任意类型的数据。
（2）props是只读属性，只能读取属性的值，无法修改对象
（3）使用类组件，如果写了构造函数，应该将props传递给super()，否则无法在构造函数中获取到props

Class App extends React.Component{
	//constructor是原型对象指向其构造函数的
	constructor(props){
		//推荐给props传递构造函数
		super(props)
	}
	render() {
		return() {
			return <div>接收到的数据:{this.props.age}<div/>
		}
	}
}

二、组件之间的传递数据

1、父组件传递数据给子组件

（1）父组件提供要传递的state数据
（2）给子组件标签添加属性，值为state中的数据
（3）子组件通过props接收组件中传递的数据

//父组件
class Parent extends React.Component{
	state = {name:'sxy'}
	render(){
		return(
			<div>
				传递父组件的数据到子组件中去:<Child name={this.state.myName}/>
			</div>
		)
	}
}
//子组件
function Child() {
	return (
		//函数组件通过props获取到父组件传递来的数据
		<div> 子组件接收到数据:{props.name}</div>
	)
}

2、子组件传递数据给父组件

1、首先，子组件中得有数据
2、在父组件中定义一个方法，用于获取子组件中数据
3、将子组件引入到父组件中
4、在父组件中的子组件标签中自定义定义一个属性，将父组件定义的方法传递到子组件中
5、在子组件中定义一个方法，通过this.props来获得父组件传来的方法，并将子组件中的数据通过参数传递给父组件

//父组件
class Father extends React.Component {
	//2、在父组件中定义一个方法，用于获取子组件中数据
    getSonData = (data) => {
        console.log('子组件的数据',data);
    }

    render() {
        return (
            <div>
            	//3、将子组件引入到父组件中
            	//4、在父组件中的子组件标签中自定义定义一个属性，将父组件定义的方法传递到子组件中
                子组件:<Son getdata = {this.getSonData}/>
            </div>
        )
    }
}

//子组件
class Son extends React.Component{
	//	1、首先，子组件中得有数据
	state = {name:'sxy'}
	
	//5、在子组件中定义一个方法，通过this.props来获得父组件传来的方法，并将子组件中的数据通过参数传递给父组件
    send = () => {
        this.props.getData(this.state.name)
    }
	render() {
        return (
            <button onClick={this.send}>向父组件发送数据</button>
        )
    }
}

3、兄弟组件之间的传递数据

1、首先建立一个共享的父组件，里面包括共享的状态和共享的方法
2、将子组件们通过import来引入
3、在父组件中子组件的标签中自定义属性来向子组件传递方法或者状态
4、在子组件中通过props来获得共享的状态和方法

//公共父组件
class Public extends React.Component {
    //提供共享状态
    state = {count : 0}
    //提供共享的方法
    add = () => {
        this.setState({
            count:this.state.count + 1
        })
    }

    render() {
        return (
            <div>
                <Son1 count = {this.state.count}/>
                <Son2 add = {this.add}/>
            </div>
        )
    }
}

//子组件1
function Son1(props) {
    return <h1>计数器:{props.count}</h1>
}
//子组件2
function Son2(props) {
    return <button onClick={() => props.add()}>+1</button>
}

三、prop-types

1、props-types是用来进行props类型检查的
2、其在开发模式下，当提供一个不合法的值作为props时，控制台会出现警告；在产品模式下，为了性能考虑，应忽略propTypes
3、使用：

import React from 'react';
import PropTypes from 'prop-types';

//static修饰的属性和方法都是静态方法和属性，只能被类名调用，不能被实例化对象调用，同时也不能被子类继承，它是属于当前这个类的
static propTypes = { 
  text: PropTypes.string.isRequired
};

class Component extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}