Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.13.1.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="App"></div>
</body>
</html>
 
"use strict";
var Component = React.Component
var PropTypes = React.PropTypes
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; };
var App = (function (_Component) {
  function App() {
    _classCallCheck(this, App);
    if (_Component != null) {
      _Component.apply(this, arguments);
    }
  }
  _inherits(App, _Component);
  // on crée une méthode qui retourne ce contexte
  App.prototype.getChildContext = function getChildContext() {
    return {
      foo: this.props.foo };
  };
  App.prototype.render = function render() {
    return React.createElement(
      "div",
      { className: "putainde-App" },
      React.createElement(Container, null)
    );
  };
  _createClass(App, null, [{
    key: "childContextTypes",
    // on définit les types de ce que l'on souhaite passer dans
    // le contexte
    value: {
      foo: PropTypes.string },
    enumerable: true
  }]);
  return App;
})(Component);
var Container = (function (_Component2) {
  function Container() {
    _classCallCheck(this, Container);
    if (_Component2 != null) {
      _Component2.apply(this, arguments);
    }
  }
  _inherits(Container, _Component2);
  Container.prototype.getChildContext = function getChildContext() {
    return {
      bar: "oh hai" };
  };
  Container.prototype.render = function render() {
    return React.createElement(
      "div",
      { className: "putainde-Container" },
      React.createElement(IntermediaryComponent, null)
    );
  };
  _createClass(Container, null, [{
    key: "childContextTypes",
    // les contextes sont *merged*, ce qui nous permet de le construire
    // sans se soucier du niveau auquel sera notre composant.
    value: {
      bar: PropTypes.string },
    enumerable: true
  }]);
  return Container;
})(Component);
// ce composant n'a pas besoin de savoir que ses enfants on besoin
// de certaines propriétés du contexte
var IntermediaryComponent = (function (_Component3) {
  function IntermediaryComponent() {
    _classCallCheck(this, IntermediaryComponent);
    if (_Component3 != null) {
      _Component3.apply(this, arguments);
    }
  }
  _inherits(IntermediaryComponent, _Component3);
  IntermediaryComponent.prototype.render = function render() {
    return React.createElement(Content, null);
  };
  return IntermediaryComponent;
})(Component);
var Content = (function (_Component4) {
  function Content() {
    _classCallCheck(this, Content);
    if (_Component4 != null) {
      _Component4.apply(this, arguments);
    }
  }
  _inherits(Content, _Component4);
  Content.prototype.render = function render() {
    return React.createElement(
      "div",
      { className: "putainde-Content" },
      React.createElement(
        "div",
        { className: "putainde-Content-line" },
        React.createElement(
          "strong",
          null,
          "foo"
        ),
        ": ",
        this.context.foo
      ),
      React.createElement(
        "div",
        { className: "putainde-Content-line" },
        React.createElement(
          "strong",
          null,
          "bar"
        ),
        ": ",
        this.context.bar
      )
    );
  };
  _createClass(Content, null, [{
    key: "contextTypes",
    // pour chaque composant utilisant des propriétés du contexte,
    // on stipule ce dont on a besoin
    value: {
      foo: PropTypes.string,
      bar: PropTypes.string },
    enumerable: true
  }]);
  return Content;
})(Component);
React.render(React.createElement(App, { foo: Date.now() }), document.getElementById("App"));
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers