React父子组件传值

父组件向子组件传值

1.父组件中定义要传的值

import React, { Component } from "react"
import "./assets/css/app.css"
// 引入组件A
import ComentA from "./components/ComentA"


class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: "我是父组件的值"
    }
  }
  render () {
    return (
      <div>
        <span>这是app组件</span>
        //向子组件传递值,前面的变量名可自定义
        <ComentA msg={this.state.msg}></ComentA>
      </div>
    )
  }
}


export default App

2.在子组件中接收父组件传递过来的值

// import React, { Component } from "react"
//类组件的使用方法
// class ComentA extends Component {
//   constructor(props){
//     super(props)
//     this.state={

//     }
//   }
//   render () {
//     return (
//       <>
//         <div>
//           <p>我是组件A</p>
//           <p>{this.props.msg}</p>
//