组件通信

组件通信分为几种：

    父组件给子组件通信

    子组件给父组件通信

    兄弟组件通信

1.父组件给子组件通信

法一：

子组件页面：

import React from 'react';

export default class Child extends React.Component{

    constructor(props) {

        super(props)

    }

    render() {

        return (

            <div>

                <h1>Hello,{this.props.name}</h1>

            </div>

        )

    }

}

父组件页面：

<Child name='lala'/>

法二：

子组件页面：

import React from 'react';

import PropTypes from 'prop-types';

export default function Child({ name }) {

    return <h1>Hello,{name}</h1>

}

Child.PropTypes = {

    name:PropTypes.string.isRequired,

}

父组件页面：

<Child name='lala'/>

2.子组件给父组件通信：

子组件：

import React from 'react';

export default class Child extends React.Component{

    constructor(props) {

        super(props)

    }

    render() {

        return (

            <div>

                哈哈哈哈，我是子组件

                <button onClick={this.props.hideComponent}>隐藏子组件</button>

            </div>

        )

    }

}

父组件：

import React from 'react';

import Child from './child';

export default class App extends React.Component{

    constructor() {

        super()

        this.state = {

            isShowChild:true

        }

    }

    showComponent = () => {

        this.setState({

            isShowChild: true

        })

    }

    hideComponent = () => {

        this.setState({

            isShowChild: false

        })

    }

    render() {

        return (

            <div>

                <button onClick={this.showComponent}>显示child组件</button>

                {

                    this.state.isShowChild ? <Child hideComponent= {this.hideComponent}/> : null

                }

            </div>

        )

    }