zoukankan      html  css  js  c++  java
  • 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子传父

    努力才会有收获,坚持才会成功。
  • 相关阅读:
    django之admin管理工具
    django之中间件
    cookie和session
    day052-53 django框架
    day050 前端Jquery库的使用
    sprint
    Scrum 项目1.0
    【团队项目】3.0
    [读书笔记]
    【团队项目】2.0
  • 原文地址:https://www.cnblogs.com/97Coding/p/14730301.html
Copyright © 2011-2022 走看看