React子传父
作者:互联网
父子之间的通信:子传父
子组件:
import React, { Component } from 'react' export default class CounterButton extends Component { render() { const {increment} = this.props; //通过props拿到父组件传过来的事件 return ( <button onClick={increment}>+1</button> ) } }
父组件:
import React, { Component } from 'react' import CounterButton from '../CounterButton/CounterButton'; export default class Header extends Component { constructor(props){ super(props); this.state={ title:'我是标题', counter:0 } } render() { const{title,counter} = this.state return ( <div> <h2>当前我们的计数{counter}</h2> <CounterButton increment={this.increment}/> //子组件 <h3 title={title}>我是标题</h3> </div> ) } increment=()=>{ console.log('被调用'); this.setState({ counter:this.state.counter + 1 }) } }
组件之间的通信例子:
标签:子传父,counter,Component,React,props,组件,CounterButton 来源: https://www.cnblogs.com/lpx520/p/15769029.html