React.js parent-child component data binding real-time communication example display

巴扎黑
Release: 2017-09-26 09:35:25
Original
1592 people have browsed it

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!