Beispielanzeige für die Datenbindung der übergeordneten und untergeordneten Komponente von React.j in Echtzeit

In diesem Artikel wird hauptsächlich der Beispielcode für die Echtzeitkommunikation der Eltern-Kind-Komponente vorgestellt.

Ich erforsche und lerne immer noch React.js und bin auf das Problem der Eltern-Kind-Komponente gestoßen. Ich habe das Problem untersucht, es mit allen geteilt und eine Notiz für mich selbst hinterlassen:

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")

Das obige ist der detaillierte Inhalt vonBeispielanzeige für die Datenbindung der übergeordneten und untergeordneten Komponente von React.j in Echtzeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!