Cet article vous présente principalement l'exemple de code de la communication en temps réel de liaison de données de composant parent-enfant de React.js. J'apprends toujours React.js moi-même et j'ai rencontré le problème de la liaison de données de composant parent-enfant en temps réel. communication. Je l'ai étudié et partagé. Laissez une note pour tout le monde et pour vous-même :
import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter extends Component{ render(){ return( <p style={{border:'1px solid red'}}> {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('组件将要挂载') } 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"))
Recommandations associées :
Vue2.0 Père et Fils Explication détaillée de la fonction de transfert de composants
Explication détaillée de la communication des composants non parent-enfant du bus d'événements dans vue
Réagir à l'analyse des instances de composants d'ordre élevé
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!