组件通信

组件通信分为几种：

    父组件给子组件通信

    子组件给父组件通信

    兄弟组件通信

1.父组件给子组件通信

法一：

子组件页面：

import React from 'react';

export default class Child extends React.Component{

    constructor(props) {

        super(props)

    }

    render() {

        return (

           

               

Hello,{this.props.name}

           

        )

    }

}

父组件页面：

法二：

子组件页面：

import React from 'react';

import PropTypes from 'prop-types';

export default function Child({ name }) {

    return

Hello,{name}

}

Child.PropTypes = {

    name:PropTypes.string.isRequired,

}

父组件页面：

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

子组件：

import React from 'react';

export default class Child extends React.Component{

    constructor(props) {

        super(props)

    }

    render() {

        return (

           

                哈哈哈哈，我是子组件

                隐藏子组件

           

        )

    }

}

父组件：

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 (

           

                显示child组件

                {

                    this.state.isShowChild ? : null

                }

           

        )

    }