React.js 상위-하위 컴포넌트 데이터 바인딩 실시간 통신의 자세한 예

이 글에서는 주로 React.js 상위-하위 컴포넌트 데이터 바인딩 실시간 통신의 샘플 코드를 소개합니다. 저는 아직 React.js를 배우고 있는 중인데, 상위-하위 컴포넌트 데이터 바인딩 실시간 통신 문제에 직면했습니다. 공부해서 공유했는데, 메모도 남겨주세요:

import React,{Component} from 'react'
import ReactDOM from 'react-dom'

class ChildCounter extends Component{
  render(){
    return(
      <p style={{border:&#39;1px solid red&#39;}}>
        {this.props.count}
      </p>
    )
  }
}
/*
* 大家默认规定的一些步骤，方便大家看
* 1.默认值
* 2.初始化状态
* 3.钩子函数
* 4.方法函数
* */
class Counter extends Component{
  //默认属性对象
  static defaultProps={
    number:5
  }
  constructor(props){
    super(props);
    //获取我的初始状态
    this.state={
      number:props.number
    }
  }
  //钩子函数
  componentWillMount(){
    console.log(&#39;组件将要挂载&#39;)
  }

  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(
      <p>
        <p>{this.state.number}</p>
        <button onClick={this.handleClick}>+</button>
        <ChildCounter count={this.state.number}></ChildCounter>
      </p>
    )
  }
}
//渲染到页面
ReactDOM.render(<Counter></Counter>,document.querySelector("#root"))

관련 추천:

Vue2.0 상위-하위 컴포넌트 전송 기능 상세 설명

자세한 이벤트 버스 비 -vue의 상위-하위 구성 요소 통신

React High 1차 구성 요소 예제 분석

위 내용은 React.js 상위-하위 컴포넌트 데이터 바인딩 실시간 통신의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!