react父组件与子组件中的数据互传问题

1.父组件传数据给子组件

两种形式的子组件来接受父组件的值

代码如下(示例):

import React from 'react'

// 函数式子组件
function FSon(props) {
  console.log(props)
  return (
    <div>
      子组件1
      {props.msg}
    </div>
  )
}

// 类子组件
class CSon extends React.Component {
  render() {
    return (
      <div>
        子组件2
        {this.props.msg}
      </div>
    )
  }
}
// 父组件
class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      <div>
        <div>父组件</div>
        <FSon msg={this.state.message} />
        <CSon msg={this.state.message} />
      </div>
    )
  }
}

export default App

总结

类组件中要加this关键字。
props可以传递任意数据:数字、字符串、布尔值、数组、对象、函数、JSX。那么对应父组件中子组件绑定的属性如下:
在这里插入图片描述
子组件中使用方式:
在这里插入图片描述
不过以上对于数据的使用过于麻烦,一般提前对props解构赋值,再直接使用:
在这里插入图片描述

2.子组件传数据给父组件

子组件利用props先调用父组件传递过来的函数,当子组件触发时,把子组件想要传递的数据当成这个函数的实参放入,这样父组件中的那个函数执行时会传入这个实参。实则:父组件中的函数去子组件中 “溜达一圈” 带个参数回来执行。


import React from 'react'

// 子组件
function Son(props) {
 function handleClick() {
   // 调用父组件传递过来的回调函数 并注入参数
   props.changeMsg('this is newMessage')
 }
 return (
   <div>
     {props.msg}
     <button onClick={handleClick}>change</button>
   </div>
 )
}


class App extends React.Component {
 state = {
   message: 'this is message'
 }
 // 提供回调函数
 changeMessage = (newMsg) => {
   console.log('子组件传过来的数据:',newMsg)
   this.setState({
     message: newMsg
   })
 }
 render() {
   return (
     <div>
       <div>父组件</div>
       <Son
         msg={this.state.message}
         // 传递给子组件
         changeMsg={this.changeMessage}
       />
     </div>
   )
 }
}

export default App
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

定位算法工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值