React-组件传值

一、父传子

　　1、在 state 中准备要传递给子组件的数据

　　2、以属性的方法将值传递给子组件使用的标签位置

　　3、在子组件内部使用 this.props 接收父组件传递过来的数据

import React from 'react'

class Father extends React.Component {
  // 1、在 state 中准备要传递给子组件的数据
  state = {
    name: '亚瑟'
  }
  render() {
    return(
      <div>
        {/* 2、以属性的方法将值传递给子组件使用的标签位置 */}
        <Son name={this.state.name} />
      </div>
    )
  }
}

class Son extends React.Component {
  render() {
    return(
      <div>
        {/* 3、在子组件内部使用 this.props 接收父组件传递过来的数据 */}
        父组件传递的值：{this.props.name}
      </div>
    )
  }
}

export default Father

二、子传父

　　1、在父组件中声明一个回调函数

　　2、将父组件中声明的函数当成 props 属性值传递给子组件

　　3、子组件通过 props 调用回调函数

　　4、将子组件的数据作为参数传递给回调函数

import React from 'react'

class Father extends React.Component {
  state = {
    parMsg: ''
  }
  // 1. 在父组件中声明一个回调函数 
  parFunc = (msg) => {
    // 4.将子组件的数据作为参数传递给回调函数 
    console.log(msg)
    this.setState({
      parMsg: msg
    })
  }
  render() {
    return(
      <div>
        父组件：{this.state.parMsg}
        {/* 2.将回调函数当成 props 属性值传递给子组件 */}
        <Son getPar={this.parFunc} />
      </div>
    )
  }
}

class Son extends React.Component {
  state = {
    sonMsg: 18
  }
  sonFunc = () => {
    {/* 3.子组件通过 props 调用回调函数 */}
    this.props.getPar(this.state.sonMsg)
  }
  render() {
    return(
      <div>
        子组件：
        <button onClick={this.sonFunc}>点击传值给父组件</button>
      </div>
    )
  }
}

export default Father