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

 

组件之间的通信例子：