React07-props再React中我们单文件组件开发，组件通信问题。再React中组件通信：父传子：再父组件定

再React中我们单文件组件开发，组件通信问题。

再React中组件通信：

父传子：再父组件定义数据，将数据传递子组件，子组件props来接受
子传父：自定义事件来完成。
兄弟组件：通过事件总线的方式（很少用）

一、props的使用

创建父组件

 import React, { Component } from 'react' 
 import ChildrenComp from './ChildrenComp' 
 export default class ParentComp extends Component { 
     state = {     
         username: "xiaowang",   
         user: ["小张", "小李"]   
     }   
     changeUsername = ()=>{   
         this.setState({    
             username:"xiaofeifei"   
         })    
     }    
     render() {    
         const {username,user} = this.state     
         return (      
             <div>          
                 <h2>父组件</h2>          
                 <button onClick={this.changeUsername}>修改username</button>   
                 <ChildrenComp username={username} users={user}></ChildrenComp>      
             </div>    
         ) 
     }
 }

创建子组件

 import React, { Component } from 'react' 
 export default class ChildrenComp extends Component {  
     render() {   
         const {username,users} = this.props;   
         return (          
             <div>        
                 <h3>子组件</h3>         
                 <p>{username}</p>      
                 <p>{users}</p>        
             </div>         
         )    
     }
 }

再react类组件中，要获取外部的数据，将props挂载当前组件身上。

 this.props.xxxx

父组件数据更新，子组件能够动态获取数据

传递指定数据类型的值
```
 <ChildrenComp index={1} username={username} users={user}></ChildrenComp>
```
如果你要传递的值类型为number，你需要再{}填写你的值。

二、props单向数据流

import React, { Component } from 'react'
export default class ChildrenComp extends Component {  
    changeUsername = ()=>{    
        this.props.username = "xiaofeifei"  
    }   
    render() {      
    const {username,users,index} = this.props; 
        return (        
            <div>        
                <h3>子组件</h3>    
                <p>{username}</p>    
                <p>{users}</p>     
                <p>{typeof index}</p>     
                <button onClick={this.changeUsername}>修改username</button>     
            </div>    
        )   
    }
}

再子组件中也满足单向数据流的概念，一旦你对props的值进行修改，页面默认TypeError错误。

你可以修改对象里面的数据，修改完成后，页面不会更新

changeUsername = ()=>{    this.props.users[0] = "王一博"}

强制更新页面

changeUsername = ()=>{      
    // this.props.username = "xiaofeifei"    
    this.props.users[0] = "王一博"      
    // 等你数据更新完毕后,自己强制刷新     
    this.forceUpdate()    
}

this.forceUpdate()可以要求当前组件强制更新页面，相当于调用一次render方法渲染。

三、props验证

父传子数据可以在子组件中进行数据校验。

别人调用你的组件，你要求数据类型，设置默认值

props验证器才能完成props的校验。

在老版本的react中，验证器我们需要自己下载对应依赖。但是在新版本里，验证器无需自己下载

npm install prop-types //老版本react 17以前yarn add prop-types

在项目中使用验证器

import PropTypes from "prop-types"
export default class ChildrenComp extends Component {}
// 自己封装了一个公共组件,要求别人给你传递你想要数据类型.
ChildrenComp.propTypes = {   
    username:PropTypes.string.isRequired, 
    index:PropTypes.number.isRequired
}

ChildrenComp.propTypes代表给类添加props验证。

PropTypes.string.isRequired,验证器的代码。

四、props的默认值

在子组件中动态给类添加一个defaultProps属性就可以完成

ChildrenComp.defaultProps = {    selectedIndex:1}

父组件没有传递值过来，页面默认显示1.

如果没有默认值，父组件也没有传递值。页面不会显示undefined

五、子组件传参父组件

在react中子组件要传递参数给父组件，我们只需要自定义事件就可以。

<ChildrenComp changeUserByChild={this.changeUsers}></ChildrenComp>

changeUserByChild:这个是一个属性名字，由你们来定，值为一个函数引用。

子组件接受到这个属性名字（函数引用）。直接调用

<button onClick={this.updateData}>子传父</button>
updateData = ()=>{ 
    this.props.changeUserByChild(["孵化园","环球中心"])
}