React使用context传递数据

使用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
    }