使用Context不用依賴父子關係傳遞資料

在React開發中，我們經常使用props來進行父元素到子元素的資料傳遞，如果兄弟元素之間資料傳遞，那就需要先將資料傳遞到父元素然後再傳遞到另一個元素中，但是如果兩個元素之間不是緊密的父子關係資料應該怎麼傳遞呢？這個時候我們就可以用context來實現。

    //一個元件
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';

    export default class Comment extends Component
 
 {
        //在這裡定義一個getChildContext(),這個是用來傳遞資料的元件，需要定義
        //這個方法,需要返回一個含有資料的物件,並且要定義childContextProps約束
        getChildContext(){
            return {
                data:'I am data.'
            }
        }
        render() {
            return (
                <div>Comment</div>
            )
        }
    }

    Comment.childContextType = {
        data:PropTypes.String
    }
 

    //另一個元件,接收資料的元件,定義contextTypes約束
    const Receive = (props,context) => (
        <div>
            {context.data}
        </div>
    )
    Receive.contextTypes = {
        data:PropTypes.String
    }