1.父传子

1.在父组件中定义数据 2.将父组件中需要传递的数据绑定到组件件的标签上 3.在子组件中通过this.props接收 4.这里的props需要定义类型，是否必须要求

children.jsx

import React, { Component } from 'react'
export default class index extends Component {
    state={
        person:{
            name:"wangsu",
            age:12,
            grade:90,
            class:1,
            sex:"male"
        }
    }
    childrenHandle=()=>{
      this.props.parent.getChildrenMsg(this,this.state.person)
    }
    render() {
        const {arr}=this.props
        return (
            <div>
                <h2>我是子组件</h2>
                 <ul>
                     {
                         arr.map(item=>{
                             return <li key={item}>{item}</li>
                         })
                     }
                 </ul>
                 <button onClick={this.childrenHandle}>子向父传递数据</button>
            </div>
        )
    }
}

parent.jsx

import React, { Component } from 'react'
import Chidren from '../Children'
export default class index extends Component {
    state={
        arr:["ws",'dd','dddwwww','sss','ffff'],
        msg:{}
    }
    getChildrenMsg=(result,msg)=>{
      this.setState({
          msg
      })
    }
    render() {
        const {arr,msg}=this.state
        return (
            <div>
               <h1>我是父组件</h1> <button onClick={this.parentHandle}>父向子传递值</button>
               <ul>
                   <li>name:{msg.name}</li>
                   <li>age:{msg.age}</li>
                   <li>sex:{msg.sex}</li>
                   <li>grade:{msg.grade}</li>
                   <li>class:{msg.class}</li>
               </ul>
              <Chidren arr={arr} parent={this}></Chidren>
            </div>
        )
    }
}

2.子传父

1.在父组件中，将整个父组件传递到子组件标签的parent属性上，此时的整个组件会存在于子组件的props上 2.在父组件中定义一个自定义的事件，事件中有两个参数，第一个参数就是子组件，第二个参数就是子组件传递雇来的数据。 3.在子组件中，通过this.props.parent去调用父组件中定义的那个事件，传递进第一个参数是子组件的this,第二个参数就是子组件传递给父组件的数据。

children.jsx

import React, { Component } from 'react'
export default class index extends Component {
    state={
        person:{
            name:"wangsu",
            age:12,
            grade:90,
            class:1,
            sex:"male"
        }
    }
    childrenHandle=()=>{
      this.props.parent.getChildrenMsg(this,this.state.person)
    }
    render() {
        console.log(this.props,"xxxxx")
        const {arr}=this.props
        return (
            <div>
                <h2>我是子组件</h2>
                 <ul>
                     {
                         arr.map(item=>{
                             return <li key={item}>{item}</li>
                         })
                     }
                 </ul>
                 <button onClick={this.childrenHandle}>子向父传递数据</button>
            </div>
        )
    }
}

parent.jsx

import React, { Component } from 'react'
import Chidren from '../Children'
export default class index extends Component {
    state={
        arr:["ws",'dd','dddwwww','sss','ffff'],
        msg:{}
    }
    getChildrenMsg=(result,msg)=>{
        console.log(result)
      this.setState({
          msg
      })
    }
    render() {
        const {arr,msg}=this.state
        return (
            <div>
               <h1>我是父组件</h1> <button onClick={this.parentHandle}>父向子传递值</button>
               <ul>
                   <li>name:{msg.name}</li>
                   <li>age:{msg.age}</li>
                   <li>sex:{msg.sex}</li>
                   <li>grade:{msg.grade}</li>
                   <li>class:{msg.class}</li>
               </ul>
              <Chidren arr={arr} parent={this}></Chidren>
            </div>
        )
    }
}