React.js parent-child component data binding real-time communication example display-JS Tutorial-php.cn

This article mainly introduces the sample code of react.js parent-child component data binding real-time communication.

I am still exploring and learning react.js myself, and encountered the problem of parent-child component data binding real-time communication. I studied the problem, shared it with everyone, and left a note for myself:

import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter extends Component{ render(){ return(  {this.props.count} 
 ) } } /* * 大家默认规定的一些步骤，方便大家看 * 1.默认值 * 2.初始化状态 * 3.钩子函数 * 4.方法函数 * */ class Counter extends Component{ //默认属性对象 static defaultProps={ number:5 } constructor(props){ super(props); //获取我的初始状态 this.state={ number:props.number } } //钩子函数 componentWillMount(){ console.log('组件将要挂载') } componentDidMount(){ console.log("组件挂载完成") } handleClick=()=>{ //this.setState方法是异步的，一个函数里面只能调用一次this.setState方法 //调用多次会合并，只执行一次 this.setState((prev,next)=>({ //上一次的状态prev number:prev.number+1 }),()=>{ console.log("回调函数执行") }) // this.setState({index:this.state.index+1}) } render(){ //调用子组件ChildCounter，把当前状态值传过去 return(  
{this.state.number}
   
 ) } } //渲染到页面 ReactDOM.render(,document.querySelector("#root")

Copy after login

The above is the detailed content of React.js parent-child component data binding real-time communication example display. For more information, please follow other related articles on the PHP Chinese website!