Heim > Web-Frontend > js-Tutorial > Hauptteil

Detailliertes Beispiel für die Datenbindung der Eltern-Kind-Komponente von React.js in Echtzeit

小云云
Freigeben: 2018-02-01 13:15:33
Original
2070 Leute haben es durchsucht

In diesem Artikel wird Ihnen hauptsächlich der Beispielcode für die Datenbindung von Eltern-Kind-Komponenten in Echtzeit vorgestellt. Ich selbst lerne immer noch React.js und bin auf das Problem der Datenbindung von Eltern-Kind-Komponenten in Echtzeit gestoßen Kommunikation. Ich habe es studiert und für alle geteilt, und hinterlasse eine Notiz für dich selbst:


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"))
Nach dem Login kopieren

Verwandte Empfehlungen:

Vue2.0 Vater und Sohn Detaillierte Erläuterung der Komponentenübertragungsfunktion

Detaillierte Erläuterung der Ereignisbus-Nicht-Eltern-Kind-Komponentenkommunikation in Vue

Reagieren Sie auf die Analyse von Komponenteninstanzen höherer Ordnung

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Datenbindung der Eltern-Kind-Komponente von React.js in Echtzeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage