首页 > 其他 > 详细

react组件传值

时间:2021-05-04 23:24:07      阅读:32      评论:0      收藏:0      [点我收藏+]

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子传父

 

react组件传值

原文:https://www.cnblogs.com/97Coding/p/14730301.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!