popinContextProvider.jsx

//Initialisation de l'app
const appStart = ()=> {
  
   const {render} = ReactDOM;
  
    //Création d'un provider de contexte
   const PopinHandlerProvider = React.createClass( {
    //Ce que je veux dans mon contexte
    getChildContext() {
        return {handlers: this.props.handlers};
    },
    //Je rend l'enfant tel quel (High order component)
    render() {
        return this.props.children;
    }
});

//Pour fournir un contexte il faut
PopinHandlerProvider.childContextTypes = {
  handlers: React.PropTypes.object
}


//Composant fils de l'arbre va recevoir le contexte comme props
const ComposantCibleDesHandlers = (props)=>{
console.log('ComposantCibleDesHandlers', this.props);
return (
  <div>
    <h2>Je suis le composant cible des handlers</h2>
    <button onClick={props.handlerPopin1}>handler1</button>
  </div>
  )
}

//Fonction qui permet de connecter n'importe quel popin à des handlers définit dans le parent provider
function connectPopinHandlers(ComponentToConnect, handlerNames){
  const ConnectedComponent = React.createClass( {
    
    render() {      
        //On construit les props.   
        const buildedProps = handlerNames.reduce((res, value) => {
          //console.log(name, this.context.handlers[name], buildedProps)
          res[value] = this.context.handlers[value];
          return res;
                  
        }, {}); //Ajouter un clone des props en tant que valeur initiale
                
        // console.log('buildedProps', buildedProps, 'name', handlerNames, 'context', this.context);
        return (
                 <ComponentToConnect {...buildedProps}/>
            );
    }
 });
 ConnectedComponent.contextTypes = {
  handlers: React.PropTypes.object
}
 return  ConnectedComponent;
}


//On connecte le composant au props venant du parent (ce qui permet de récupérer les handlers et de les filer en props.
const ComposantCibleDesHandlersConnected =  connectPopinHandlers(ComposantCibleDesHandlers, ['handlerPopin1', 'handlerPopin5', 'handlerPopin7'] );
  
//Composant intermediaire qui ne connait pas les props
const ComposantIntermediaire = (props)=> {
return <div>
  <h1>Je suis un composant intermediaire</h1>
  <ComposantCibleDesHandlersConnected />
</div>
}

//Application
function App(props){
     //Je défnine les handlers au plus haut niveau de l'arbre et ils seront placés dans le contexte par le provider
     const handlers = {
       handlerPopin1: ()=>console.log('handlerPopin1'),
       handlerPopin5: ()=>console.log('handlerPopin5'),
       handlerPopin7: ()=>console.log('handlerPopin7')
     }
    return (
      
      <div>
        <h1>Provider</h1>
        <PopinHandlerProvider handlers={handlers} >
          <ComposantIntermediaire/>
        </PopinHandlerProvider>
       </div>
    );
  }
  render(<App/>, document.querySelector("div#root"));
}

document.addEventListener('DOMContentLoaded', appStart, false);