生命周期之装载之子父同步数据

最新推荐文章于 2024-06-06 22:35:15 发布

少女彤

最新推荐文章于 2024-06-06 22:35:15 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 react 文章标签： react 生命周期

本文链接：https://blog.youkuaiyun.com/weixin_43244655/article/details/82834299

前端同时被 2 个专栏收录

23 篇文章

订阅专栏

react

7 篇文章

订阅专栏

本文介绍了一个使用React实现的父子组件通信案例，展示了如何在父组件中定义状态和方法，并将其传递给子组件，以及子组件如何根据父组件传来的状态进行渲染。通过一个具体的例子，读者可以了解到React组件间通信的基本原理。

1.创建一个父组件，并将路径引入app.js中

import React,{Component} from 'react'
import Zi from  './zi'

class Father extends Component{
    constructor(props){
        super(props)
        //初始化一个状态
        this.state={
            name:'暴发户',
            number:Math.random()
        }
        //按钮绑定数据
        this.handButtonClick=this.handButtonClick.bind(this)
    }
    //给按钮一个方法
    handButtonClick(){
        this.setState({
            number:Math.random()
        })
    }
    render(){
    //接收数据
        let{ handButtonClick }=this
        let{ name, number }=this.state
        return(
            <div>
                <h1>{ name  }</h1>
                <p>{ number }</p>
                <button onClick={ handButtonClick }>Change Number</button>
                <hr/>
                <Zi num={number }/>
            </div>
        )
    }
}

export default Father

2.创建子组件

import React,{ Component } from 'react'

class Zi extends Component{
    constructor(props){
        super(props)
        this.state={
            num:props.num
        }
    }
    // 这个方法可以在render之前又一次更新数据的机会
    static getDerivedStateFromProps(props,state){
       return{
           num:props.num
       }
    }
    render(){
        let{ num }=this.state
        return(
            <div>
                { num }
            </div>
        )
    }
}
export default Zi