react中数据父传子和子传父的实现

最新推荐文章于 2024-03-04 20:54:12 发布

街头嗳昧℡

最新推荐文章于 2024-03-04 20:54:12 发布

阅读量205

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/m0_58845957/article/details/121874026

版权

本文详细介绍了在React中如何实现父组件向子组件传递数据，以及子组件如何将数据回传给父组件。通过props将父组件的状态传入子组件，并展示了具体的代码实例和效果。

摘要由CSDN通过智能技术生成

React父组件与子组件之间的值传递

一、父组件向子组件传递信息

将父组件的state通过props传入子组件

父组件代码片段

 
  constructor(props){
    super(props)
    this.state={
      message:"我是父组件传来的"
    }
  }
  render(){
    return(
      <div style={
  {background:"red",padding:"30px"}}>
          <Son msg={this.state.message}/>
      </div>
    )
  }
}

子组件代码片段

<div>
   父组件传到子组件的信息：<span style={
  {background:"white"}}>{this.props.msg}</span>
</div>

效果

图片.png

二、子组件向父组件传递数据

父组件代码片段

constructor(props){
    super(props)
    this.state={
      visible:false,
    }
  }
  /**
   * 进入
   */
  goIn(){
    this.setState({
      visible:true
    })