React——父子组件之间的传值

1、父向子传值

• 父组件 向子组件自定义的属性传递值
• <Child content={this.state.data}></Child>
• 子组件通过 this.props.自定义的属性 接受数据
• <div>{this.props.content}</div>
• Parent.js

import React, {Component, Fragment} from 'react'
import Child from './Child'

class Parent extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: 'parent => child'
    }
  }

  render(){
    return(
      <Fragment>
        <Child content={this.state.data}></Child>
      </Fragment>
    )
  }
}

export default Parent

• Child.js

import React, {Component, Fragment} from 'react'

class Child extends Component {
  constructor(props){
    super(props)
  }

  render(){
    return(
      <Fragment>
        <div>{this.props.content}</div>
      </Fragment>
    )
  }
}

export default Child

2、子向父传值

• 父组件定义一个函数，参数是子组件即将传过来的值，函数体是拿到数据后要做的事，然后把这个函数传给子组件（注意传进去的函数 要 用bind 改变this指向 令this指向变为父组件，不然传过去后，子组件会因为自己没有这个函数而执行不了）

<Child parent={this.Parent}></Child>

Parent(data){
  console.log(data)
}

• 子组件要有一个函数 调用 父组件传过来的函数，把要传的数据当做参数传进函数中，达到子向父传值的目的

<div onClick={this.Child}>click me</div>

Child(){
    const { parent } = this.props
    const { data } = this.state
    parent(data)
}

• 有点像jsonp的原理
• Parent.js

import React, {Component, Fragment} from 'react'
import Child from './Child'

class Parent extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: ''
    }
    this.Parent = this.Parent.bind(this)
  }

  render(){
    return(
      <Fragment>
        <Child parent={this.Parent}></Child>
      </Fragment>
    )
  }

  Parent(data){
    console.log(data)
  }
}

export default Parent

• Child.js

import React, {Component, Fragment} from 'react'

class Child extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: 'child => parent'
    }
    this.Child = this.Child.bind(this)
  }

  render(){
    return(
      <Fragment>
        <div onClick={this.Child}>click me</div>
      </Fragment>
    )
  }

  Child(){
    const { parent } = this.props
    const { data } = this.state
    parent(data)
  }
}

export default Child