react 父子组件通信

Posted 2021-01-11 xuyan1

import React from ‘react‘;
import B from ‘./B‘;
class A extends React.Component{
    state = {
        msg:‘我来自于A组件‘
    }
    isClick=(value)=> {
        this.setState({
            msg: value
        })
    }
    render() {
        return (
            <div>
                我是A组件：

                <hr />
                <B msg={this.state.msg} myClick={this.isClick}/>
            </div>

        )
    }
}

export default A;

import React from ‘react‘;

class B extends React.Component{
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <h2>我是B组件：{this.props.msg}</h2>
                <button onClick={() => this.props.myClick(‘我来源于B组件‘)}>按钮</button>
            </div>
        )
    }
}

export default B;