摘要：丟失問題文本是為了說清目前的機制是而不是我們以為的機制，并說明這兩者的區(qū)別。雖然明白了原理，但是問題并沒有解決。上下文注意這里是，需要執(zhí)行接受回調(diào)函數(shù)，回調(diào)函數(shù)中的內(nèi)容為實測可以成功拿到。

  
文本是為了說清react context目前的機制是owner context 而不是我們以為的parent context 機制，并說明這兩者的區(qū)別。希望能對即將使用context的同學(xué)有所幫助.

context是為了解決component之間通信的上下文機制，該api目前并未定稿所以react并沒有開放出來。最近有大量需要共享上下文的場景才去了解這個api，然后也成功被繞了進去....
介紹與用法這篇文章Introduction to Contexts in React.js說得很清楚~

需要在Parent中聲明context，在Children中拿到context并打印出來。

var Children = React.createClass({
  contextTypes: {
    value: React.PropTypes.string
  },
  render: function() {
    return 

{this.context.value || "并沒有context"}

;
  }
});

var Parent = React.createClass({
  childContextTypes: {
    value: React.PropTypes.string
  },
  getChildContext: function() {
    return { value: "上下文" };
  },
  render: function() {
    return (



        {this.props.children}
      


    );
  }
});

var App = React.createClass({
  render: function() {
    return (
      
        
      
    );
  }
});

React.render(React.createElement(App), document.body);

這樣執(zhí)行完后屏幕上應(yīng)該是『上下文』三個打字，但事實是

以及warning

那么問題來了，上下文為何失效了呢？！為什么Children拿不到Parent里面的context呢？！

各種google之后發(fā)現(xiàn)gaearon大神在issue中的回復(fù)。

原來現(xiàn)在0.13.3版本的react context的傳遞規(guī)則是owner規(guī)則，在剛才的例子中雖然Children的parent為Parent，但是App才是Children與parent共同的owner，this.context只能拿到owner傳遞規(guī)則的context。

  
尼瑪，跟想象中的不一樣?。∧鉷rops、render的規(guī)則不都是Parent規(guī)則么！

不繼續(xù)吐槽，那么按照這個思路把context放在App上，Parent與Children應(yīng)該都能成功拿到Context了吧。

代碼是這樣的：

var Parent = React.createClass({
  contextTypes: {
    value: React.PropTypes.string
  },
  render: function() {
    return (



        {this.context.value && "可算拿到了..." }
        {this.props.children}
      


    );
  }
});

var App = React.createClass({
  childContextTypes: {
    value: React.PropTypes.string
  },
  getChildContext: function() {
    return { value: "上下文" };
  },
  render: function() {
    return (
      
        
      
    );
  }
});

React.render(React.createElement(App), document.body);

結(jié)果是這樣的：

看來context成功被拿到，看到這里大家應(yīng)該明白React context的機制了把。

雖然明白了原理，但是問題并沒有解決。我就是希望Chilren拿到Parent中的context，而不是拿到App中的context啊。我目前一共找到了兩種方式可以在現(xiàn)階段獲取parent context。

通過接收回調(diào)函數(shù)而不是react.element，然后在Parent中進行render，那么render的內(nèi)容的owner自然就是Parent了，從而可以成功拿到Parent中的context。

var Parent = React.createClass({
  childContextTypes: {
    value: React.PropTypes.string
  },
  getChildContext: function() {
    return { value: "上下文" };
  },
  render: function() {
    return (



        {this.props.children() /* 注意這里是function，需要執(zhí)行 */}
      


    );
  }
});

// parent接受回調(diào)函數(shù)，回調(diào)函數(shù)中的內(nèi)容owner為parent
var App = React.createClass({
  render: function() {
    return (
      
        {this.renderChild}
      
    );
  },
  renderChild: function() {
    return ;
  }
});

實測可以成功拿到context。

這種方法雖然用起來很方便不過健壯性很差，等react更新之后沒準(zhǔn)又得改代碼~
可以通過this._reactInternalInstance._context.value拿到該element的parent context。this._reactInternalInstance._currentElement._context.value就是默認(rèn)的owner context。

var Children = React.createClass({
  contextTypes: {
    value: React.PropTypes.string
  },
  render: function() {
    return 


      
{"default context is: " + this.context.value}
      
{"parent context: " + this._reactInternalInstance._context.value}
      
{"owner context: " + this._reactInternalInstance._currentElement._context.value}
    

;
  }
});

var Parent = React.createClass({
  childContextTypes: {
    value: React.PropTypes.string
  },
  getChildContext: function() {
    return { value: "parent" };
  },
  render: function() {
    return (



        {this.props.children}
      


    );
  }
});

var App = React.createClass({
  childContextTypes: {
    value: React.PropTypes.string
  },
  getChildContext: function() {
    return { value: "app" };
  },
  render: function() {
    return (
      
        
      
    );
  },
});

React.render(React.createElement(App), document.body);

結(jié)果如下：

由于同事問我es6下context怎么用，想到可能有些人也不清楚，在這里一并附上。個人不推薦使用es7語法。

import React from "react";

class Children extends React.Component {

  // 如果不需要在構(gòu)造函數(shù)中使用可以不寫，沒有影響
  constructor(props, context) {
    super(props, context);
    console.log(context);
  }
  render() {
    return 


      
{"default context is: " + this.context.value}
      
{"parent context: " + this._reactInternalInstance._context.value}
      
{"owner context: " + this._reactInternalInstance._currentElement._context.value}
    

;
  }
}
Children.contextTypes = {
  value: React.PropTypes.string
};

class Parent extends React.Component {
  getChildContext() {
    return { value: "parent" };
  }

  render() {
    return (



        {this.props.children}
      


    );
  }
}
Parent.childContextTypes = {
  value: React.PropTypes.string
};

class App extends React.Component {
  getChildContext() {
    return { value: "app" };
  }

  render() {
    return (
      
        
      
    );
  }
}
App.childContextTypes = {
  value: React.PropTypes.string
};

React.render(React.createElement(App), document.body);