react组件传值

1.父传子

1.1父组件准备数据,父组件通过属性pMsg直接传递给子组件

import React, { Component } from 'react'
import Child from './Child'
export class Parent extends Component {
  state = {
    msg:'我是父组件的信息' //1.父组件准备数据
  }
  render() {
    return (
      <div>
        我是父组件
        {/* 父组件直接通过属性传递给子组件 */}
        <Child pMsg={this.state.msg}></Child>
      </div>
    )
  }
}

export default Parent

　1.2子组件通过props接收

import React, { Component } from 'react'
// 子组件
export class Child extends Component {
  render() {
    // 子组件通过props接收父组件传递的值
    console.log(this.props) 
    return (
      <div>
        子组件 
        {/* 使用 */}
        <p>{this.props.pMsg}</p>
      </div>
    )
  }
}

export default Child

2.1子传父